95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
import React, { ReactNode, HTMLAttributes } from 'react';
|
|
import { Box, BoxProps } from './Box';
|
|
|
|
interface TableProps extends HTMLAttributes<HTMLTableElement> {
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function Table({ children, className = '', ...props }: TableProps) {
|
|
return (
|
|
<Box overflow="auto" className="border border-border-gray rounded-sm">
|
|
<table className={`w-full border-collapse text-left ${className}`} {...props}>
|
|
{children}
|
|
</table>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function TableHead({ children, ...props }: TableHeadProps) {
|
|
return (
|
|
<thead className="bg-graphite-black border-b border-border-gray" {...props}>
|
|
{children}
|
|
</thead>
|
|
);
|
|
}
|
|
|
|
interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function TableBody({ children, ...props }: TableBodyProps) {
|
|
return (
|
|
<tbody className="divide-y divide-border-gray/50" {...props}>
|
|
{children}
|
|
</tbody>
|
|
);
|
|
}
|
|
|
|
interface TableRowProps extends BoxProps<'tr'> {
|
|
children: ReactNode;
|
|
clickable?: boolean;
|
|
variant?: 'default' | 'highlight';
|
|
}
|
|
|
|
export function TableRow({ children, className = '', clickable = false, variant = 'default', ...props }: TableRowProps) {
|
|
const baseClasses = 'transition-colors duration-150 ease-smooth';
|
|
const variantClasses = variant === 'highlight' ? 'bg-primary-accent/5' : 'hover:bg-white/[0.02]';
|
|
const classes = [
|
|
baseClasses,
|
|
variantClasses,
|
|
clickable ? 'cursor-pointer' : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box as="tr" className={classes} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
interface TableHeaderProps extends BoxProps<'th'> {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function TableHeader({ children, className = '', ...props }: TableHeaderProps) {
|
|
const baseClasses = 'py-2.5 px-4 text-[11px] font-bold text-gray-500 uppercase tracking-wider';
|
|
const classes = [baseClasses, className].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box as="th" className={classes} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
interface TableCellProps extends BoxProps<'td'> {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function TableCell({ children, className = '', ...props }: TableCellProps) {
|
|
const baseClasses = 'py-3 px-4 text-sm text-gray-300';
|
|
const classes = [baseClasses, className].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box as="td" className={classes} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|