64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import * as React from 'react';
|
|
import { clsx } from 'clsx';
|
|
|
|
export type DataTableProps = React.TableHTMLAttributes<HTMLElement>;
|
|
|
|
export function DataTable({ className, children, ...props }: DataTableProps) {
|
|
return (
|
|
<div className="w-full overflow-x-auto rounded-xl border border-[var(--bl-border)] bg-[var(--bl-surface-card)] shadow-sm shadow-black/[0.04]">
|
|
<table
|
|
className={clsx(
|
|
'w-full border-collapse text-left text-sm text-[var(--bl-text-primary)]',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export type DataTableHeaderProps = React.HTMLAttributes<HTMLElement>;
|
|
|
|
export function DataTableHeader({ className, ...props }: DataTableHeaderProps) {
|
|
return <thead className={clsx('bg-[var(--bl-surface-muted)]/80', className)} {...props} />;
|
|
}
|
|
|
|
export type DataTableBodyProps = React.HTMLAttributes<HTMLElement>;
|
|
|
|
export function DataTableBody({ className, ...props }: DataTableBodyProps) {
|
|
return <tbody className={clsx('divide-y divide-[var(--bl-border)]', className)} {...props} />;
|
|
}
|
|
|
|
export type DataTableRowProps = React.HTMLAttributes<HTMLElement>;
|
|
|
|
export function DataTableRow({ className, ...props }: DataTableRowProps) {
|
|
return (
|
|
<tr
|
|
className={clsx('transition-colors hover:bg-[var(--bl-surface-muted)]/70', className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export type DataTableHeadProps = React.ThHTMLAttributes<HTMLElement>;
|
|
|
|
export function DataTableHead({ className, ...props }: DataTableHeadProps) {
|
|
return (
|
|
<th
|
|
className={clsx(
|
|
'px-4 py-3 text-xs font-semibold uppercase tracking-[0.08em] text-[var(--bl-text-secondary)]',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export type DataTableCellProps = React.TdHTMLAttributes<HTMLElement>;
|
|
|
|
export function DataTableCell({ className, ...props }: DataTableCellProps) {
|
|
return <td className={clsx('px-4 py-3 align-middle', className)} {...props} />;
|
|
}
|