Git support (#143)

src-web/components/core/Table.tsx

@@ -0,0 +1,64 @@
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+import React from 'react';
+
+export function Table({ children }: { children: ReactNode }) {
+  return (
+    <table className="w-full text-sm mb-auto min-w-full max-w-full divide-y divide-surface-highlight">
+      {children}
+    </table>
+  );
+}
+
+export function TableBody({ children }: { children: ReactNode }) {
+  return <tbody className="divide-y divide-surface-highlight">{children}</tbody>;
+}
+
+export function TableHead({ children }: { children: ReactNode }) {
+  return <thead>{children}</thead>;
+}
+
+export function TableRow({ children }: { children: ReactNode }) {
+  return <tr>{children}</tr>;
+}
+
+export function TableCell({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <td
+      className={classNames(
+        className,
+        'py-2 [&:not(:first-child)]:pl-4 text-left w-0 whitespace-nowrap',
+      )}
+    >
+      {children}
+    </td>
+  );
+}
+
+export function TruncatedWideTableCell({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <TableCell className={classNames(className, 'w-full relative')}>
+      <div className="absolute inset-0 py-2 truncate">{children}</div>
+    </TableCell>
+  );
+}
+
+export function TableHeaderCell({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <th className={classNames(className, 'py-2 [&:not(:first-child)]:pl-4 text-left w-0')}>
+      {children}
+    </th>
+  );
+}