fix: support tables

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

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"

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,
       },
     }),