add components

src/components/ui/table/table.module.scss

@@ -1,5 +1,6 @@
 .table {
   border-collapse: collapse;
+  width: 100%;
   color: var(--color-light-100);
   border: 1px solid var(--color-dark-500);
 }

src/components/ui/table/table.tsx

@@ -75,3 +75,49 @@ export const TableEmpty: FC<ComponentProps<'div'> & { mt?: string; mb?: string }
     </Typography>
   )
 }
+export type Column = {
+  key: string
+  title: string
+  sortable?: boolean
+}
+export type Sort = {
+  key: string
+  direction: 'asc' | 'desc'
+} | null
+
+export const TableHeader: FC<
+  Omit<
+    ComponentPropsWithoutRef<'thead'> & {
+      columns: Column[]
+      sort?: Sort
+      onSort?: (sort: Sort) => void
+    },
+    'children'
+  >
+> = ({ columns, sort, onSort, ...restProps }) => {
+  const handleSort = (key: string, sortable?: boolean) => () => {
+    if (!onSort || !sortable) return
+
+    if (sort?.key !== key) return onSort({ key, direction: 'asc' })
+
+    if (sort.direction === 'desc') return onSort(null)
+
+    return onSort({
+      key,
+      direction: sort?.direction === 'asc' ? 'desc' : 'asc',
+    })
+  }
+
+  return (
+    <TableHead {...restProps}>
+      <TableRow>
+        {columns.map(({ title, key, sortable = true }) => (
+          <TableHeadCell key={key} onClick={handleSort(key, sortable)}>
+            {title}
+            {sort && sort.key === key && <span>{sort.direction === 'asc' ? '▲' : '▼'}</span>}
+          </TableHeadCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  )
+}