feat: HQ redesign

adminsite/components/Table.tsx

@@ -0,0 +1,83 @@
+import clsx from "clsx";
+import type { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react";
+
+/*
+ * One table treatment for the whole console.
+ *
+ * There were four: billing, licences, accounts and catalogue each wrote their
+ * own thead, and they disagreed about the head's type size, its tracking,
+ * whether it sat on --panel-2, and whether numbers were tabular. Catalogue's
+ * heads were sentence-case body text. A registry whose columns are set four
+ * ways does not read as one product.
+ *
+ * The head is the keyed idiom — mono, small, uppercase, widely tracked — which
+ * is what a column head is: a key above a value, exactly as the record line is
+ * a key beside one.
+ */
+
+export function Table({ className, children, ...props }: HTMLAttributes<HTMLTableElement>) {
+    return (
+        <div className="overflow-x-auto">
+            <table className={clsx("w-full border-collapse text-left text-[0.86rem]", className)} {...props}>
+                {children}
+            </table>
+        </div>
+    );
+}
+
+export function THead({ className, children, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
+    return (
+        <thead className={clsx("border-b border-rule", className)} {...props}>
+            {children}
+        </thead>
+    );
+}
+
+export function TBody({ className, children, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
+    return (
+        <tbody className={className} {...props}>
+            {children}
+        </tbody>
+    );
+}
+
+export function TR({ className, children, ...props }: HTMLAttributes<HTMLTableRowElement>) {
+    return (
+        <tr className={clsx("border-b border-rule-soft last:border-0 hover:bg-panel-2", className)} {...props}>
+            {children}
+        </tr>
+    );
+}
+
+interface CellProps {
+    /** Right-aligns the cell. For quantities and money, which read down the column. */
+    numeric?: boolean;
+}
+
+export function TH({ className, numeric, children, ...props }: ThHTMLAttributes<HTMLTableCellElement> & CellProps) {
+    return (
+        <th
+            className={clsx(
+                "whitespace-nowrap px-4 py-2.5 font-mono text-[0.62rem] font-normal uppercase tracking-[0.13em] text-ink-3",
+                numeric && "text-right",
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </th>
+    );
+}
+
+export function TD({ className, numeric, children, ...props }: TdHTMLAttributes<HTMLTableCellElement> & CellProps) {
+    return (
+        <td className={clsx("px-4 py-3 align-middle", numeric && "text-right tabular-nums", className)} {...props}>
+            {children}
+        </td>
+    );
+}
+
+/** The secondary line under a cell's main value — an ID, a deployment, a date. */
+export function Sub({ children }: { children: React.ReactNode }) {
+    return <div className="text-[0.78rem] text-ink-3">{children}</div>;
+}