96 lines
2.4 KiB
TypeScript
96 lines
2.4 KiB
TypeScript
import React, { ReactNode, ElementType } from 'react';
|
|
import { Box, BoxProps } from './primitives/Box';
|
|
|
|
interface TableProps extends BoxProps<'table'> {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function Table({ children, className = '', ...props }: TableProps) {
|
|
const { border, translate, ...rest } = props;
|
|
return (
|
|
<Box overflow="auto" border borderColor="border-border-gray" rounded="sm">
|
|
<table className={`w-full border-collapse text-left ${className}`} {...(rest as any)}>
|
|
{children}
|
|
</table>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
interface TableHeaderProps extends BoxProps<'thead'> {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function TableHeader({ children, className = '', ...props }: TableHeaderProps) {
|
|
return (
|
|
<Box as="thead" className={`bg-graphite-black border-b border-border-gray ${className}`} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export const TableHead = TableHeader;
|
|
|
|
interface TableBodyProps extends BoxProps<'tbody'> {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function TableBody({ children, className = '', ...props }: TableBodyProps) {
|
|
return (
|
|
<Box as="tbody" className={`divide-y divide-border-gray/50 ${className}`} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
interface TableRowProps extends BoxProps<'tr'> {
|
|
children: ReactNode;
|
|
hoverBg?: string;
|
|
clickable?: boolean;
|
|
variant?: string;
|
|
}
|
|
|
|
export function TableRow({ children, className = '', hoverBg, clickable, variant, ...props }: TableRowProps) {
|
|
const classes = [
|
|
'transition-colors',
|
|
clickable || props.onClick ? 'cursor-pointer' : '',
|
|
hoverBg ? `hover:${hoverBg}` : (clickable || props.onClick ? 'hover:bg-white/5' : ''),
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box as="tr" className={classes} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
interface TableCellProps extends BoxProps<'td'> {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function TableHeaderCell({ children, className = '', ...props }: TableCellProps) {
|
|
const classes = [
|
|
'px-4 py-3 text-xs font-bold text-gray-400 uppercase tracking-wider',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box as="th" className={classes} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export function TableCell({ children, className = '', ...props }: TableCellProps) {
|
|
const classes = [
|
|
'px-4 py-4 text-sm text-gray-300',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box as="td" className={classes} {...props}>
|
|
{children}
|
|
</Box>
|
|
);
|
|
}
|