88 lines
1.8 KiB
TypeScript
88 lines
1.8 KiB
TypeScript
import { ReactNode } from 'react';
|
|
|
|
interface TableProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function Table({ children, className = '' }: TableProps) {
|
|
return (
|
|
<div className={`overflow-x-auto ${className}`}>
|
|
<table className="w-full">
|
|
{children}
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface TableHeadProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function TableHead({ children }: TableHeadProps) {
|
|
return (
|
|
<thead>
|
|
{children}
|
|
</thead>
|
|
);
|
|
}
|
|
|
|
interface TableBodyProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function TableBody({ children }: TableBodyProps) {
|
|
return (
|
|
<tbody>
|
|
{children}
|
|
</tbody>
|
|
);
|
|
}
|
|
|
|
interface TableRowProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function TableRow({ children, className = '' }: TableRowProps) {
|
|
const baseClasses = 'border-b border-charcoal-outline/50 hover:bg-iron-gray/30 transition-colors';
|
|
const classes = className ? `${baseClasses} ${className}` : baseClasses;
|
|
|
|
return (
|
|
<tr className={classes}>
|
|
{children}
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
interface TableHeaderProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function TableHeader({ children, className = '' }: TableHeaderProps) {
|
|
const baseClasses = 'text-left py-3 px-4 text-xs font-medium text-gray-400 uppercase';
|
|
const classes = className ? `${baseClasses} ${className}` : baseClasses;
|
|
|
|
return (
|
|
<th className={classes}>
|
|
{children}
|
|
</th>
|
|
);
|
|
}
|
|
|
|
interface TableCellProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function TableCell({ children, className = '' }: TableCellProps) {
|
|
const baseClasses = 'py-3 px-4';
|
|
const classes = className ? `${baseClasses} ${className}` : baseClasses;
|
|
|
|
return (
|
|
<td className={classes}>
|
|
{children}
|
|
</td>
|
|
);
|
|
} |