From 142417aea3ca598b357e75a42611ecabd925f041 Mon Sep 17 00:00:00 2001
From: SKairinos <skairinos@gmail.com>
Date: Tue, 24 Sep 2024 12:03:57 +0000
Subject: [PATCH] fix: support tables

---
 src/components/table/Table.tsx       | 53 ++++++++++++++++++++++++++++
 src/components/table/index.tsx       |  8 +++++
 src/theme/components/MuiTableHead.ts |  6 +++-
 3 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 src/components/table/Table.tsx
 create mode 100644 src/components/table/index.tsx

diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx
new file mode 100644
index 00000000..15114305
--- /dev/null
+++ b/src/components/table/Table.tsx
@@ -0,0 +1,53 @@
+import { type FC, type ReactNode } from "react"
+import {
+  Table as MuiTable,
+  type TableProps as MuiTableProps,
+  TableBody,
+  type TableBodyProps,
+  TableCell,
+  type TableCellProps,
+  TableContainer,
+  type TableContainerProps,
+  TableHead,
+  type TableHeadProps,
+  TableRow,
+  type TableRowProps,
+} from "@mui/material"
+
+export interface TableProps extends MuiTableProps {
+  headers: ReactNode[]
+  children: ReactNode
+  containerProps?: TableContainerProps
+  headProps?: TableHeadProps
+  headCellProps?: TableCellProps
+  headRowProps?: TableRowProps
+  bodyProps?: TableBodyProps
+}
+
+const Table: FC<TableProps> = ({
+  headers,
+  children,
+  containerProps,
+  headProps,
+  headCellProps,
+  headRowProps,
+  bodyProps,
+  ...tableProps
+}) => (
+  <TableContainer {...containerProps}>
+    <MuiTable {...tableProps}>
+      <TableHead {...headProps}>
+        <TableRow {...headRowProps}>
+          {headers.map((header, index) => (
+            <TableCell {...headCellProps} key={`table-head-cell-${index}`}>
+              {header}
+            </TableCell>
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody {...bodyProps}>{children}</TableBody>
+    </MuiTable>
+  </TableContainer>
+)
+
+export default Table
diff --git a/src/components/table/index.tsx b/src/components/table/index.tsx
new file mode 100644
index 00000000..9f7fd3d3
--- /dev/null
+++ b/src/components/table/index.tsx
@@ -0,0 +1,8 @@
+export { default as Table } from "./Table"
+export * from "./Table"
+export {
+  TableCell as Cell,
+  type TableCellProps as CellProps,
+  TableRow as BodyRow,
+  type TableRowProps as BodyRowProps,
+} from "@mui/material"
diff --git a/src/theme/components/MuiTableHead.ts b/src/theme/components/MuiTableHead.ts
index 8b8107ad..038652a6 100644
--- a/src/theme/components/MuiTableHead.ts
+++ b/src/theme/components/MuiTableHead.ts
@@ -1,4 +1,4 @@
-import { typographyClasses } from "@mui/material"
+import { typographyClasses, tableCellClasses } from "@mui/material"
 
 import { includesClassNames } from "../../utils/theme"
 import type Components from "./_components"
@@ -12,7 +12,11 @@ const MuiTableHead: Components["MuiTableHead"] = {
       }),
       [`.${typographyClasses.root}`]: {
         color: "white",
+        fontWeight: 600,
         marginBottom: 0,
+      },
+      [`.${tableCellClasses.head}`]: {
+        color: "white",
         fontWeight: 600,
       },
     }),