85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/ui/Button';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Section } from '@/ui/Section';
|
|
import { Container } from '@/ui/Container';
|
|
import { Card } from '@/ui/Card';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Trophy, Users } from 'lucide-react';
|
|
|
|
interface DriverStat {
|
|
label: string;
|
|
value: string | number;
|
|
intent?: 'primary' | 'success' | 'warning' | 'telemetry';
|
|
}
|
|
|
|
interface DriversDirectoryHeaderProps {
|
|
totalDriversLabel: string;
|
|
activeDriversLabel: string;
|
|
totalWinsLabel: string;
|
|
totalRacesLabel: string;
|
|
onViewLeaderboard: () => void;
|
|
}
|
|
|
|
export function DriversDirectoryHeader({
|
|
totalDriversLabel,
|
|
activeDriversLabel,
|
|
totalWinsLabel,
|
|
totalRacesLabel,
|
|
onViewLeaderboard,
|
|
}: DriversDirectoryHeaderProps) {
|
|
const stats: DriverStat[] = [
|
|
{ label: 'drivers', value: totalDriversLabel, intent: 'primary' },
|
|
{ label: 'active', value: activeDriversLabel, intent: 'success' },
|
|
{ label: 'total wins', value: totalWinsLabel, intent: 'warning' },
|
|
{ label: 'races', value: totalRacesLabel, intent: 'telemetry' },
|
|
];
|
|
|
|
return (
|
|
<Section variant="dark" padding="md">
|
|
<Container>
|
|
<Stack direction="row" align="center" justify="between" gap={8}>
|
|
<Stack gap={6}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Card variant="dark">
|
|
<Icon icon={Users} size={6} intent="primary" />
|
|
</Card>
|
|
<Heading level={1}>Drivers</Heading>
|
|
</Stack>
|
|
|
|
<Text size="lg" variant="low">
|
|
Meet the racers who make every lap count. From rookies to champions, track their journey and see who's dominating the grid.
|
|
</Text>
|
|
|
|
<Stack direction="row" gap={6} wrap>
|
|
{stats.map((stat, index) => (
|
|
<Stack key={index} direction="row" align="center" gap={2}>
|
|
<Text size="sm" variant="low">
|
|
<Text as="span" weight="semibold" variant="high">{stat.value}</Text> {stat.label}
|
|
</Text>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack gap={2} align="center">
|
|
<Button
|
|
variant="primary"
|
|
onClick={onViewLeaderboard}
|
|
icon={<Icon icon={Trophy} size={5} />}
|
|
>
|
|
View Leaderboard
|
|
</Button>
|
|
<Text size="xs" variant="low" align="center">
|
|
See full driver rankings
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|