47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Box } from '@/ui/Box';
|
|
import { Table, TableHead, TableBody, TableRow, TableHeaderCell } from '@/ui/Table';
|
|
import { TrendingUp } from 'lucide-react';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Stack } from '@/ui/Stack';
|
|
import React from 'react';
|
|
|
|
interface DriverTableProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export function DriverTable({ children }: DriverTableProps) {
|
|
return (
|
|
<Stack direction="col" gap="md">
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
<Surface variant="precision" rounded="md" padding="sm">
|
|
<Icon icon={TrendingUp} size={5} intent="primary" />
|
|
</Surface>
|
|
<Stack direction="col" gap="none">
|
|
<Heading level={2} weight="bold">Driver Rankings</Heading>
|
|
<Text size="xs" variant="low">Performance metrics based on sanctioned race results</Text>
|
|
</Stack>
|
|
</Box>
|
|
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeaderCell textAlign="center" w="60px">Rank</TableHeaderCell>
|
|
<TableHeaderCell>Competitor</TableHeaderCell>
|
|
<TableHeaderCell w="180px">Nationality</TableHeaderCell>
|
|
<TableHeaderCell textAlign="right" w="120px">Skill Rating</TableHeaderCell>
|
|
<TableHeaderCell textAlign="right" w="100px">Victories</TableHeaderCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{children}
|
|
</TableBody>
|
|
</Table>
|
|
</Stack>
|
|
);
|
|
}
|