Componente Tabela

package-lock.json

@@ -9,9 +9,12 @@
       "version": "0.1.0",
       "dependencies": {
         "axios": "^1.6.1",
+        "classnames": "^2.3.2",
         "next": "14.0.2",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "sass": "^1.69.5",
+        "scss": "^0.2.4"
       }
     },
     "node_modules/@next/env": {
@@ -162,6 +165,18 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -177,6 +192,25 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -207,6 +241,37 @@
         }
       ]
     },
+    "node_modules/chokidar": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -231,6 +296,17 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.3",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
@@ -263,6 +339,30 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
@@ -273,6 +373,49 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
+    "node_modules/immutable": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
+      "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -370,11 +513,38 @@
         }
       }
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ometa": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/ometa/-/ometa-0.2.2.tgz",
+      "integrity": "sha512-LZuoK/yjU3FvrxPjUXUlZ1bavCfBPqauA7fsNdwi+AVhRdyk2IzgP3JRnevvjzQ6fKHdUw8YISshf53FmpHrng==",
+      "engines": {
+        "node": ">= 0.2.0"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -430,6 +600,33 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.69.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
+      "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -438,6 +635,17 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/scss": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/scss/-/scss-0.2.4.tgz",
+      "integrity": "sha512-4u8V87F+Q/upVhUmhPnB4C1R11xojkRkWjExL2v0CX2EXTg18VrKd+9JWoeyCp2VEMdSpJsyAvVU+rVjogh51A==",
+      "dependencies": {
+        "ometa": "0.2.2"
+      },
+      "engines": {
+        "node": ">= 0.2.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -476,6 +684,17 @@
         }
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",

package.json

@@ -10,8 +10,11 @@
   },
   "dependencies": {
     "axios": "^1.6.1",
+    "classnames": "^2.3.2",
     "next": "14.0.2",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "sass": "^1.69.5",
+    "scss": "^0.2.4"
   }
 }

src/components/ComponentesGeral/Table/index.jsx

+import styles from "./styles.module.scss";
+
+export default function Table({
+  children,
+  padding,
+  paddingTop,
+  paddingRight,
+  paddingLeft,
+  paddingBottom,
+  margin,
+  marginTop,
+  marginRight,
+  marginLeft,
+  marginBottom,
+  style,
+  ...props
+}) {
+  const allStyle = {
+    ...(padding && { padding }),
+    ...(paddingTop && { paddingTop: paddingTop }),
+    ...(paddingBottom && { paddingBottom: paddingBottom }),
+    ...(paddingLeft && { paddingLeft: paddingLeft }),
+    ...(paddingRight && { paddingRight: paddingRight }),
+    ...(margin && { margin }),
+    ...(marginTop && { marginTop: marginTop }),
+    ...(marginBottom && { marginBottom: marginBottom }),
+    ...(marginLeft && { marginLeft: marginLeft }),
+    ...(marginRight && { marginRight: marginRight }),
+    ...(style && { ...style }),
+  };
+
+  return (
+    <table className={styles.table} {...props} style={allStyle}>
+      {children}
+    </table>
+  );
+}

src/components/ComponentesGeral/Table/styles.module.scss

+.table {
+  width: 100%;
+  box-sizing: border-box;
+  border: var(--table-border);
+  border-collapse: collapse;
+  margin: .3rem;
+  overflow-x: scroll;
+  font-family: var(--fontSecondary);
+  font-size: var(--fontSizeMedium);
+}

src/components/ComponentesGeral/Tbody/index.jsx

+import styles from "./styles.module.scss";
+
+export default function Tbody({ children }) {
+  return <tbody className={styles.tbody}>{children}</tbody>;
+}
\ No newline at end of file

src/components/ComponentesGeral/Tbody/styles.module.scss

+.tbody {
+  
+}
\ No newline at end of file

src/components/ComponentesGeral/Td/index.jsx

+import styles from "./styles.module.scss";
+import classNames from "classnames";
+
+export default function Td({ children, center, left, right, ...props }) {
+  const classes = classNames({
+    [styles.td]: true,
+    [styles.center]: props.center,
+    [styles.right]: props.right,
+    [styles.left]: props.left,
+  });
+
+  return (
+    <td className={classes} {...props}>
+      {children}
+    </td>
+  );
+}

src/components/ComponentesGeral/Td/styles.module.scss

+.td {
+  text-align: center;
+  border: 1px solid var(--darkGray);
+  padding: .5rem;
+}
+
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
+
+.right {
+  text-align: right;
+}

src/components/ComponentesGeral/Th/index.jsx

+import styles from "./styles.module.scss";
+import classNames from "classnames";
+
+export default function Th({ children, center, left, right, ...props }) {
+  
+  const classes = classNames({
+    [styles.th]: true, 
+    [styles.center]: props.center,
+    [styles.right]: props.right,
+    [styles.left]: props.left,
+  });
+  
+  return <th className={classes} {...props}>{children}</th>;
+}
\ No newline at end of file

src/components/ComponentesGeral/Th/styles.module.scss

+.th {
+  border: 1px solid var(--darkGray);
+  padding: .5rem;
+  color: var(--white);
+  background-color: var(--primary);
+}
+
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
+
+.right {
+  text-align: right;
+}
\ No newline at end of file

src/components/ComponentesGeral/Thead/index.jsx

+import styles from "./styles.module.scss";
+
+export default function Thead({ children }) {
+  return <thead className={styles.thead}>{children}</thead>;
+}
\ No newline at end of file

src/components/ComponentesGeral/Thead/styles.module.scss

+.thead {
+  
+}
\ No newline at end of file

src/components/ComponentesGeral/Tr/index.jsx

+import styles from "./styles.module.scss";
+import classNames from "classnames";
+
+export default function Tr({ children, center, left, right, ...props }) {
+  
+  const classes = classNames({
+    [styles.tr]: true, 
+    [styles.center]: props.center,
+    [styles.right]: props.right,
+    [styles.left]: props.left,
+  });
+  
+  return <tr className={classes} {...props}>{children}</tr>;
+}
\ No newline at end of file

src/components/ComponentesGeral/Tr/styles.module.scss

+.tr:hover {
+  background-color: var(--focus) !important;
+}
+
+.tr:nth-child(odd) {
+  background-color: var(--lightGray);
+}
+
+.tr:nth-child(even) {
+  background-color: var(--white);
+}
+
+.center {
+  text-align: center;
+}
+
+.left {
+  text-align: left;
+}
+
+.right {
+  text-align: right;
+}
\ No newline at end of file

src/components/Itens/index.jsx

+import Table from "@/components/ComponentesGeral/Table";
+import Tbody from "@/components/ComponentesGeral/Tbody";
+import Thead from "@/components/ComponentesGeral/Thead";
+import Td from "@/components/ComponentesGeral/Td";
+import Th from "@/components/ComponentesGeral/Th";
+import Tr from "@/components/ComponentesGeral/Tr";
+
+<Table>
+  <Thead>
+    <Tr>
+      <Th>Id</Th>
+      <Th>Nome</Th>
+      <Th>E-mail</Th>
+    </Tr>
+  </Thead>
+  <Tbody>
+    <Tr>
+      <Td>1</Td>
+      <Td>João</Td>
+      <Td>joao@gmail.com</Td>
+    </Tr>
+    <Tr>
+      <Td>2</Td>
+      <Td>Maria</Td>
+      <Td>maria@gmail.com</Td>
+    </Tr>
+    <Tr>
+      <Td>3</Td>
+      <Td>José</Td>
+      <Td>jose@gmail.com </Td>
+    </Tr>
+  </Tbody>
+</Table> 
\ No newline at end of file

src/pages/Teste/index.jsx

+import Cabecalho from "@/components/Cabecalho"
+import Itens from "@/components/Itens"
+
+export default function TestandoComponentes() {
+    return (
+        <>
+            <Cabecalho />
+            <h1>Testando Componentes</h1>
+            <Itens />
+        </>
+    )
+}
\ No newline at end of file