63 lines
2.3 KiB
TypeScript
63 lines
2.3 KiB
TypeScript
import { Box } from '@/ui/Box';
|
|
import { Card } from '@/ui/Card';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '@/ui/Table';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface PointsTableProps {
|
|
title?: string;
|
|
points: { position: number; points: number }[];
|
|
}
|
|
|
|
export function PointsTable({ title = 'Points Distribution', points }: PointsTableProps) {
|
|
return (
|
|
<Card>
|
|
<Heading level={2} mb={4}>{title}</Heading>
|
|
<Box overflow="auto">
|
|
<Table>
|
|
<TableHead>
|
|
<TableHeaderCell>Position</TableHeaderCell>
|
|
<TableHeaderCell textAlign="right">Points</TableHeaderCell>
|
|
</TableHead>
|
|
<TableBody>
|
|
{points.map(({ position, points: pts }) => (
|
|
<TableRow
|
|
key={position}
|
|
className={position <= 3 ? 'bg-iron-gray/20' : ''}
|
|
>
|
|
<TableCell>
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
<Box
|
|
w="7"
|
|
h="7"
|
|
rounded="full"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
className={`text-xs font-bold ${
|
|
position === 1 ? 'bg-yellow-500 text-black' :
|
|
position === 2 ? 'bg-gray-400 text-black' :
|
|
position === 3 ? 'bg-amber-600 text-white' :
|
|
'bg-charcoal-outline text-white'
|
|
}`}
|
|
>
|
|
{position}
|
|
</Box>
|
|
<Text color="text-white" weight="medium">
|
|
{position === 1 ? '1st' : position === 2 ? '2nd' : position === 3 ? '3rd' : `${position}th`}
|
|
</Text>
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell textAlign="right">
|
|
<Text color="text-white" weight="semibold" className="tabular-nums">{pts}</Text>
|
|
<Text color="text-gray-500" ml={1}>pts</Text>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</Box>
|
|
</Card>
|
|
);
|
|
}
|