spsays-admin/components/ui/table.tsx

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

/**
 * The panel's data table.
 *
 * From md up it's an ordinary table. Long values (emails, URLs) may wrap
 * anywhere so the columns always fit; if they still can't, the table scrolls
 * sideways inside its card as a last resort. Labels inside cells should use
 * <Clamp>, never `truncate` (see clamp.tsx for why).
 *
 * On a phone (below md) each row becomes a stacked card: one line per cell, labelled
 * with its column heading. The labels are read from the table's own <th>s
 * and stamped onto the cells as `data-label`, so pages need no extra markup
 * — every table in the panel gets the card layout for free. Cells under an
 * empty heading (an actions column) simply go unlabelled.
 *
 * `card="stacked"` puts each label above its value instead of beside it, so
 * long content (a feedback message) gets the card's full width.
 */
type CardLayout = "inline" | "stacked";
const CardLayoutContext = React.createContext<CardLayout>("inline");

export function Table({
  children,
  card = "inline",
}: {
  children: React.ReactNode;
  /** Phone card layout: labels beside values (default) or above them. */
  card?: CardLayout;
}) {
  const ref = React.useRef<HTMLTableElement>(null);

  // Runs after every render: rows arrive and change with the data.
  React.useLayoutEffect(() => {
    const table = ref.current;
    if (!table) return;
    const heads = Array.from(table.querySelectorAll("thead th")).map(
      (th) => th.textContent?.trim() ?? "",
    );
    table.querySelectorAll("tbody tr").forEach((tr) => {
      let col = 0;
      Array.from(tr.children).forEach((cell) => {
        const td = cell as HTMLTableCellElement;
        const label = td.colSpan > 1 ? "" : (heads[col] ?? "");
        if (label) td.dataset.label = label;
        else delete td.dataset.label;
        col += td.colSpan || 1;
      });
    });
  });

  return (
    <CardLayoutContext.Provider value={card}>
      <div className="rounded-xl border border-border bg-card md:overflow-x-auto md:overscroll-x-contain">
        <table
          ref={ref}
          className="w-full border-collapse text-sm max-md:block"
        >
          {children}
        </table>
      </div>
    </CardLayoutContext.Provider>
  );
}

export function THead({ children }: { children: React.ReactNode }) {
  return (
    <thead className="border-b border-border bg-muted/50 text-left text-xs uppercase tracking-wide text-muted-foreground max-md:hidden">
      {children}
    </thead>
  );
}

export function TH({
  children,
  className,
}: {
  children?: React.ReactNode;
  className?: string;
}) {
  return (
    <th className={cn("whitespace-nowrap px-4 py-3 font-medium", className)}>
      {children}
    </th>
  );
}

export function TR({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <tr
      className={cn(
        "border-b border-border last:border-0 align-top",
        // Phone: a card per row.
        "max-md:block max-md:px-4 max-md:py-3",
        className,
      )}
    >
      {children}
    </tr>
  );
}

export function TD({
  children,
  className,
}: {
  children?: React.ReactNode;
  className?: string;
}) {
  const card = React.useContext(CardLayoutContext);
  return (
    <td
      className={cn(
        "px-4 py-3 text-foreground",
        // Phone: one labelled block per cell — the label pinned on the left,
        // the cell's own content flowing beside it exactly as it would in the
        // table (stacked lines stay stacked). Alignment classes meant for a
        // column (text-right on actions) give way to the card's flow.
        "max-md:relative max-md:block max-md:px-0 max-md:py-1.5 max-md:text-left",
        card === "inline"
          ? "max-md:data-label:pl-28 max-md:data-label:before:absolute max-md:data-label:before:left-0 max-md:data-label:before:top-2 max-md:data-label:before:w-24"
          : // Stacked: the label is its own line above the value.
            "max-md:py-2 max-md:data-label:before:mb-1 max-md:data-label:before:block",
        "max-md:data-label:before:text-[11px] max-md:data-label:before:font-medium max-md:data-label:before:uppercase max-md:data-label:before:leading-4 max-md:data-label:before:tracking-wide max-md:data-label:before:text-muted-foreground max-md:data-label:before:content-[attr(data-label)]",
        // Long values (emails, URLs) wrap rather than widen the table or
        // card — at every width, so no string can push a column off-screen.
        "[overflow-wrap:anywhere]",
        className,
      )}
    >
      {children}
    </td>
  );
}