Merge pull request #8 from salino3/create-table-component-07

Create table component 07

package.json

@@ -15,7 +15,8 @@
   "dependencies": {
     "json-server": "^1.0.0-beta.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@types/node": "^20.13.0",

src/App.tsx

@@ -1,10 +1,10 @@
-import { HomeLayout } from "./layouts";
+import { AppRouter } from "./router";
 import "./App.scss";
 
 function App() {
   return (
     <>
-      <HomeLayout />
+      <AppRouter />
     </>
   );
 }

src/common-app/header/header.component.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { appRoutes } from "@/router";
+import "./header.styles.scss";
+
+export const Header: React.FC = () => {
+  return (
+    <header className="rootHeader">
+      <div className="containerHeader">
+        <nav className="nav">
+          <ul className="nav_list">
+            <li className="nav_item">
+              <Link to={appRoutes?.root} className="nav_link">
+                Home Page
+              </Link>
+            </li>
+            <li className="nav_item">
+              <Link to={appRoutes?.table} className="nav_link">
+                Table Component
+              </Link>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+};

src/common-app/header/header.styles.scss

@@ -0,0 +1,56 @@
+.rootHeader {
+  min-width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  .containerHeader {
+    min-width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    height: 90px;
+    background-color: var(--color-two);
+
+    .nav {
+      max-width: 500px;
+      padding: 0.5rem 1rem;
+      background-color: var(--color-one);
+      border-radius: 12px;
+      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.75);
+      .nav_list {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        gap: 2rem;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        list-style-type: none;
+
+        .nav_item {
+          padding: 0.5rem;
+          .nav_link {
+            color: var(--color-two);
+            font-weight: 600;
+            text-decoration: none;
+            border-bottom: solid 1px;
+            padding: 0.2rem;
+          }
+
+          .nav_link:active {
+            color: var(--color-four);
+          }
+        }
+
+        .nav_item:hover {
+          background-color: var(--color-three);
+          border-radius: 0.2rem;
+        }
+      }
+    }
+  }
+}

src/common-app/header/index.ts

@@ -0,0 +1 @@
+export * from "./header.component";

src/common-app/index.ts

@@ -0,0 +1 @@
+export * from "./header";

src/common/index.ts

@@ -0,0 +1 @@
+export * from "./table";

src/common/table/index.ts

@@ -0,0 +1 @@
+export * from "./table.component";

src/common/table/table.component.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import "./table.styles.scss";
+
+interface TableProps {
+  columns: any[];
+  key?: any;
+  row: any[];
+}
+
+export const TableComponet: React.FC<TableProps> = ({ columns, key, row }) => {
+  const keysToFilter = row.map((row) => row.key);
+
+  // Filtrar 'columns' para obtener solo los objetos que coincidan con 'keysToFilter'
+  const filteredColumns = columns.map((column) => {
+    const filteredColumn: any = {};
+    keysToFilter.forEach((key) => {
+      if (column.hasOwnProperty(key)) {
+        filteredColumn[key] = column[key];
+      }
+    });
+    return filteredColumn;
+  });
+
+  // Crear una lista de valores filtrados para cada propiedad
+  const valuesArray = filteredColumns.map((column) => {
+    const values: any = {};
+    keysToFilter.forEach((key) => {
+      values[key] = column[key] || "";
+    });
+    return values;
+  });
+
+  return (
+    <div className="rootCustomTooltip">
+      <div className="containerTable">
+        <table className="table">
+          <thead>
+            <tr>
+              {row &&
+                row.length > 0 &&
+                row.map((row, index) => (
+                  <th
+                    key={index}
+                    scope="col"
+                    className={`${row?.title}_${index}`}
+                  >
+                    {row?.title}
+                  </th>
+                ))}
+            </tr>
+          </thead>
+          <tbody>
+            {valuesArray.map((values, rowIndex) => (
+              <tr key={rowIndex} className={`trTable`}>
+                {keysToFilter.map((key, colIndex) => {
+                  // Busca la fila correspondiente en 'row' para determinar si tiene 'render'
+                  // const rowConfig = row.find((r) => r.key === key);
+                  const content = values[key];
+                  // rowConfig && rowConfig.render
+                  //   ? rowConfig.render(values[key], values)
+                  //   :
+
+                  return (
+                    <td
+                      key={`${key}_${rowIndex}_${colIndex}`}
+                      className={`${key}_${rowIndex}_${colIndex}`}
+                    >
+                      {content}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};

src/common/table/table.styles.scss

@@ -0,0 +1,58 @@
+.rootCustomTooltip {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 0.5rem;
+
+  .containerTable {
+    .table {
+      thead th:first-child {
+        border-radius: 12px 0 0 0 !important;
+      }
+
+      thead tr,
+      thead th,
+      thead td {
+        background-color: var(--color-four);
+        color: var(--color-two);
+        width: 200px;
+      }
+
+      thead tr th:last-child {
+        border-radius: 0 12px 0 0 !important;
+      }
+      tbody tr,
+      tbody th,
+      tbody td {
+        background-color: var(--color-three);
+        color: var(--color-two);
+        width: 200px;
+      }
+      .trTable:hover th {
+        background-color: var(--color-five);
+      }
+
+      //
+      th span {
+        display: none;
+      }
+      tbody th {
+        position: relative;
+      }
+
+      tbody th:hover span {
+        position: absolute;
+        box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px,
+          rgba(0, 0, 0, 0.22) 0px 15px 12px;
+        display: block;
+        padding: 0.5rem;
+        border-radius: 12px;
+        background-color: var(--color-one);
+        top: -10px;
+        right: 10px;
+      }
+    }
+  }
+}

src/core/index.ts

@@ -0,0 +1,2 @@
+export * from "./interfaces";
+export * from "./mock-data";

src/core/interfaces.ts

@@ -0,0 +1,15 @@
+export enum Gender {
+  Male = "male",
+  Female = "female",
+  PreferNotSay = "prefer_not_say",
+}
+
+export interface TableData {
+  id: number;
+  name: string;
+  city: string;
+  email: string;
+  age: number;
+  gender: Gender;
+  employee: boolean;
+}

src/core/mock-data.tsx

@@ -0,0 +1,40 @@
+import { Gender, TableData } from "./interfaces";
+
+export const mockTableData: TableData[] = [
+  {
+    id: 1,
+    name: "Arianna",
+    city: "Berlin",
+    email: "[email protected]",
+    age: 32,
+    gender: Gender?.Female,
+    employee: true,
+  },
+  {
+    id: 2,
+    name: "Jacob",
+    city: "Madrid",
+    email: "[email protected]",
+    age: 39,
+    gender: Gender?.PreferNotSay,
+    employee: false,
+  },
+  {
+    id: 3,
+    name: "Larry",
+    city: "London",
+    email: "[email protected]",
+    age: 50,
+    gender: Gender?.Male,
+    employee: true,
+  },
+  {
+    id: 4,
+    name: "Ma",
+    city: "ma",
+    email: "[email protected]",
+    age: 50,
+    gender: Gender?.Male,
+    employee: true,
+  },
+];

src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./use-app-functions";

src/hooks/use-app-functions.tsx

@@ -0,0 +1,13 @@
+export const useAppFunctions = () => {
+  const getEmailPrefix = (str: string) => {
+    if (str && str == typeof String) {
+      const atIndex = str.indexOf("@");
+      if (atIndex === -1) return str;
+      return str.substring(0, atIndex + 1) + "...";
+    } else {
+      return;
+    }
+  };
+
+  return { getEmailPrefix };
+};