spb/fetcha

1import * as React from "react";2import { cn } from "@/lib/utils";34export function Table({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) {5  return (6    <div className="relative w-full overflow-x-auto scrollbar-thin">7      <table className={cn("w-full caption-bottom text-[13.5px]", className)} {...props} />8    </div>9  );10}11export function TableHeader({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {12  return <thead className={cn("[&_tr]:border-b [&_tr]:border-border", className)} {...props} />;13}14export function TableBody({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>) {15  return <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />;16}17export function TableRow({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) {18  return <tr className={cn("border-b border-border transition-colors hover:bg-bg-subtle/70 data-[state=selected]:bg-bg-muted", className)} {...props} />;19}20export function TableHead({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) {21  return <th className={cn("h-9 px-3 text-left align-middle text-[11.5px] font-medium uppercase tracking-wide text-fg-subtle whitespace-nowrap first:pl-4 last:pr-4", className)} {...props} />;22}23export function TableCell({ className, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) {24  return <td className={cn("px-3 py-2.5 align-middle first:pl-4 last:pr-4", className)} {...props} />;25}26export function TableEmpty({ colSpan, children }: { colSpan: number; children: React.ReactNode }) {27  return (28    <tr>29      <td colSpan={colSpan} className="px-4 py-10 text-center text-sm text-fg-muted">30        {children}31      </td>32    </tr>33  );34}35