updates

web/components/src/table/TableBody.tsx

@@ -0,0 +1,3 @@
+export default function TableBody({ children }: React.PropsWithChildren) {
+  return <div className="flex-1 flex flex-col">{children}</div>;
+};

web/components/src/table/TableHead.tsx

@@ -0,0 +1,20 @@
+import createUseStyles from "../theme/createUseStyles";
+import { cn } from "../util/cn";
+
+const useStyles = createUseStyles({
+  tableHead: {
+    "& > div": {
+      "&:hover": {
+        backgroundColor: "inherit !important",
+        cursor: "initial !important",
+      },
+      borderBottom: "1px solid var(--color-grey)",
+    },
+  },
+});
+
+export default function TableHead({ children }: React.PropsWithChildren) {
+  const classes = useStyles();
+
+  return <div className={cn("flex-1 flex", classes.tableHead)}>{children}</div>;
+}

web/components/src/table/TableRow.tsx

@@ -0,0 +1,55 @@
+import createUseStyles from "../theme/createUseStyles";
+import { cn } from "../util/cn";
+
+export const TABLE_ROW_HEIGHT = 35;
+
+const useStyles = createUseStyles({
+  tableRow: {
+    "& > div": {
+      "&:first-child": {
+        flexGrow: [3, "!important"],
+      },
+      "&:last-child": {
+        alignContent: "flex-end",
+      },
+      "&:nth-last-child(2)": {
+        flexGrow: [1, "!important"],
+      },
+      alignContent: "center",
+      display: "flex",
+      flex: 1,
+      flexFlow: "column",
+      flexGrow: 2,
+      justifyContent: "center",
+      padding: "var(--spacing-xxs) 0",
+    },
+    "&:hover": {
+      backgroundColor: "rgba(255, 255, 255, 0.15)",
+      cursor: "pointer",
+    },
+    "&:not(:last-child)": {
+      borderBottom: "1px solid var(--color-grey)",
+    },
+    height: TABLE_ROW_HEIGHT,
+  },
+});
+
+export default function TableRow({
+  children,
+  rowClassName,
+  rowProps,
+}: React.PropsWithChildren<{
+  rowClassName?: string;
+  rowProps?: {
+    onClick: React.MouseEventHandler<HTMLElement>;
+    tabIndex: 0;
+  };
+}>) {
+  const classes = useStyles();
+
+  return (
+    <div className={cn("flex-1 flex gap-m py-xxs px-s", classes.tableRow, rowClassName)} {...rowProps}>
+      {children}
+    </div>
+  );
+};

web/components/src/table/TableWrapper.tsx

@@ -0,0 +1,14 @@
+import { cn } from "../util/cn";
+
+export default function TableWrapper({
+  children,
+  tableWrapperClassName,
+}: React.PropsWithChildren<{
+  tableWrapperClassName?: string;
+}>) {
+  return (
+    <div className={cn("flex flex-col h-full w-full border-white", tableWrapperClassName)}>
+      {children}
+    </div>
+  );
+}