domrichardson
68 lines
1.6 KiB
TypeScript
68 lines
1.6 KiB
TypeScript
import { clsx } from "clsx";
|
|
import { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react";
|
|
|
|
export function Table({ className, children, ...props }: HTMLAttributes<HTMLTableElement>) {
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<table
|
|
className={clsx("w-full border-collapse text-sm", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function Thead({ className, children, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
|
|
return (
|
|
<thead className={clsx("border-b border-border", className)} {...props}>
|
|
{children}
|
|
</thead>
|
|
);
|
|
}
|
|
|
|
export function Tbody({ className, children, ...props }: HTMLAttributes<HTMLTableSectionElement>) {
|
|
return (
|
|
<tbody className={clsx("divide-y divide-border", className)} {...props}>
|
|
{children}
|
|
</tbody>
|
|
);
|
|
}
|
|
|
|
export function Tr({ className, children, ...props }: HTMLAttributes<HTMLTableRowElement>) {
|
|
return (
|
|
<tr
|
|
className={clsx("transition-colors hover:bg-surface-2/50", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
export function Th({ className, children, ...props }: ThHTMLAttributes<HTMLTableCellElement>) {
|
|
return (
|
|
<th
|
|
className={clsx(
|
|
"px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-text-secondary",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</th>
|
|
);
|
|
}
|
|
|
|
export function Td({ className, children, ...props }: TdHTMLAttributes<HTMLTableCellElement>) {
|
|
return (
|
|
<td
|
|
className={clsx("px-4 py-3 text-text-primary", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</td>
|
|
);
|
|
}
|