86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
|
|
|
|
interface RosterTableProps {
|
|
children: ReactNode;
|
|
columns?: string[];
|
|
}
|
|
|
|
export function RosterTable({ children, columns = ['Driver', 'Role', 'Joined', 'Rating', 'Rank'] }: RosterTableProps) {
|
|
return (
|
|
<Box border borderColor="border-steel-grey" bg="surface-charcoal/50" overflow="hidden">
|
|
<Table>
|
|
<TableHead className="bg-base-graphite/50">
|
|
<TableRow>
|
|
{columns.map((col) => (
|
|
<TableHeader key={col} className="py-3 border-b border-border-steel-grey">
|
|
<Text size="xs" weight="bold" color="text-gray-500" className="uppercase tracking-widest" block>
|
|
{col}
|
|
</Text>
|
|
</TableHeader>
|
|
))}
|
|
<TableHeader className="py-3 border-b border-border-steel-grey">
|
|
{null}
|
|
</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{children}
|
|
</TableBody>
|
|
</Table>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
interface RosterTableRowProps {
|
|
driver: ReactNode;
|
|
role: ReactNode;
|
|
joined: string;
|
|
rating: ReactNode;
|
|
rank: ReactNode;
|
|
actions?: ReactNode;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export function RosterTableRow({
|
|
driver,
|
|
role,
|
|
joined,
|
|
rating,
|
|
rank,
|
|
actions,
|
|
onClick,
|
|
}: RosterTableRowProps) {
|
|
return (
|
|
<TableRow
|
|
onClick={onClick}
|
|
clickable={!!onClick}
|
|
className="group hover:bg-primary-blue/5 transition-colors border-b border-border-steel-grey/30 last:border-0"
|
|
>
|
|
<TableCell className="py-4">
|
|
{driver}
|
|
</TableCell>
|
|
<TableCell className="py-4">
|
|
{role}
|
|
</TableCell>
|
|
<TableCell className="py-4">
|
|
<Text size="sm" color="text-gray-400" font="mono">{joined}</Text>
|
|
</TableCell>
|
|
<TableCell className="py-4">
|
|
{rating}
|
|
</TableCell>
|
|
<TableCell className="py-4">
|
|
{rank}
|
|
</TableCell>
|
|
<TableCell className="py-4 text-right">
|
|
<Stack direction="row" align="center" justify="end" gap={2}>
|
|
{actions}
|
|
</Stack>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
}
|