spb/ai-atlas

1import type { ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';2import { cn } from '@/lib/cn';34/**5 * Data table helpers. `<DataTable stack>` turns rows into two-column stacked records under 768 px — give every <Td>6 * a `label` (renders `data-label`) and mark the name cell `primary`. `<DataTable scroll>` keeps columns and scrolls7 * horizontally instead (for numeric comparison tables where row structure matters).8 */9export function DataTable({ children, stack = true, scroll = false, compact = false, className, caption }: { children: ReactNode; stack?: boolean; scroll?: boolean; compact?: boolean; className?: string; caption?: string }) {10  const table = (11    <table className={cn('data-table', stack && !scroll && 'stack', compact && 'compact', className)}>12      {caption && <caption className="sr-only">{caption}</caption>}13      {children}14    </table>15  );16  return scroll ? <div className="table-scroll -mx-4 px-4 md:mx-0 md:px-0">{table}</div> : table;17}1819export function Th({ children, num, className, ...rest }: ThHTMLAttributes<HTMLTableCellElement> & { num?: boolean }) {20  return (21    <th scope="col" className={cn(num && 'num', className)} {...rest}>22      {children}23    </th>24  );25}2627export function Td({ children, label, num, primary, wide, hideStack, className, ...rest }: TdHTMLAttributes<HTMLTableCellElement> & { label?: string; num?: boolean; primary?: boolean; wide?: boolean; hideStack?: boolean }) {28  return (29    <td data-label={label} className={cn(num && 'num', primary && 'primary', wide && 'wide', hideStack && 'hide-stack', className)} {...rest}>30      {children}31    </td>32  );33}3435export function EmptyRow({ cols, children = 'No rows.' }: { cols: number; children?: ReactNode }) {36  return (37    <tr>38      <td colSpan={cols} className="py-8 text-center text-sm text-ink-3">39        {children}40      </td>41    </tr>42  );43}44