96 lines
2.7 KiB
TypeScript
96 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { Button } from '@/ui/Button';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Section } from '@/ui/Section';
|
|
import { Container } from '@/ui/Container';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { MetricCard } from '@/ui/MetricCard';
|
|
import { Trophy, Users, Zap, Flag } from 'lucide-react';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
|
|
interface DriversDirectoryHeaderProps {
|
|
totalDriversLabel: string;
|
|
activeDriversLabel: string;
|
|
totalWinsLabel: string;
|
|
totalRacesLabel: string;
|
|
onViewLeaderboard: () => void;
|
|
}
|
|
|
|
export function DriversDirectoryHeader({
|
|
totalDriversLabel,
|
|
activeDriversLabel,
|
|
totalWinsLabel,
|
|
totalRacesLabel,
|
|
onViewLeaderboard,
|
|
}: DriversDirectoryHeaderProps) {
|
|
return (
|
|
<Section variant="dark" padding="lg">
|
|
<Container>
|
|
<Stack direction="col" gap="lg">
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Stack direction="col" gap="xs">
|
|
<Stack direction="row" align="center" gap="md">
|
|
<Icon icon={Users} size={6} intent="primary" />
|
|
<Heading level={1} weight="bold">
|
|
Driver Directory
|
|
</Heading>
|
|
</Stack>
|
|
<Text size="lg" variant="low">
|
|
The official registry of GridPilot competitors. Tracking performance,
|
|
reliability, and championship progress across all sanctioned events.
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Button
|
|
variant="primary"
|
|
onClick={onViewLeaderboard}
|
|
icon={<Icon icon={Trophy} size={4} />}
|
|
>
|
|
Global Rankings
|
|
</Button>
|
|
</Stack>
|
|
|
|
<Grid cols={4} gap="md">
|
|
<Box>
|
|
<MetricCard
|
|
label="Total Registered"
|
|
value={totalDriversLabel}
|
|
icon={Users}
|
|
intent="primary"
|
|
/>
|
|
</Box>
|
|
<Box>
|
|
<MetricCard
|
|
label="Active Competitors"
|
|
value={activeDriversLabel}
|
|
icon={Zap}
|
|
intent="success"
|
|
/>
|
|
</Box>
|
|
<Box>
|
|
<MetricCard
|
|
label="Career Victories"
|
|
value={totalWinsLabel}
|
|
icon={Trophy}
|
|
intent="warning"
|
|
/>
|
|
</Box>
|
|
<Box>
|
|
<MetricCard
|
|
label="Total Race Starts"
|
|
value={totalRacesLabel}
|
|
icon={Flag}
|
|
intent="telemetry"
|
|
/>
|
|
</Box>
|
|
</Grid>
|
|
</Stack>
|
|
</Container>
|
|
</Section>
|
|
);
|
|
}
|