101 lines
3.5 KiB
TypeScript
101 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Users, Trophy } from 'lucide-react';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Button } from '@/ui/Button';
|
|
import { Stack } from '@/ui/Stack';
|
|
|
|
interface DriverStat {
|
|
label: string;
|
|
value: string | number;
|
|
color?: string;
|
|
animate?: boolean;
|
|
}
|
|
|
|
interface DriversDirectoryHeaderProps {
|
|
totalDrivers: number;
|
|
activeDrivers: number;
|
|
totalWins: number;
|
|
totalRaces: number;
|
|
onViewLeaderboard: () => void;
|
|
}
|
|
|
|
export function DriversDirectoryHeader({
|
|
totalDrivers,
|
|
activeDrivers,
|
|
totalWins,
|
|
totalRaces,
|
|
onViewLeaderboard,
|
|
}: DriversDirectoryHeaderProps) {
|
|
const stats: DriverStat[] = [
|
|
{ label: 'drivers', value: totalDrivers, color: 'text-primary-blue' },
|
|
{ label: 'active', value: activeDrivers, color: 'text-performance-green', animate: true },
|
|
{ label: 'total wins', value: totalWins.toLocaleString(), color: 'text-warning-amber' },
|
|
{ label: 'races', value: totalRaces.toLocaleString(), color: 'text-neon-aqua' },
|
|
];
|
|
|
|
return (
|
|
<Stack
|
|
as="header"
|
|
position="relative"
|
|
overflow="hidden"
|
|
rounded="2xl"
|
|
border
|
|
borderColor="border-charcoal-outline/50"
|
|
bg="bg-gradient-to-br from-iron-gray/80 via-deep-graphite to-iron-gray/60"
|
|
p={{ base: 8, lg: 10 }}
|
|
>
|
|
{/* Background Accents */}
|
|
<Stack position="absolute" right="-24" top="-24" w="96" h="96" rounded="full" bg="bg-primary-blue/5" blur="3xl" />
|
|
<Stack position="absolute" bottom="-16" left="-16" w="64" h="64" rounded="full" bg="bg-neon-aqua/5" blur="3xl" />
|
|
|
|
<Stack position="relative" display="flex" flexDirection={{ base: 'col', lg: 'row' }} alignItems={{ lg: 'center' }} justifyContent="between" gap={8}>
|
|
<Stack maxWidth="2xl">
|
|
<Stack direction="row" align="center" gap={3} mb={4}>
|
|
<Stack display="flex" h="12" w="12" alignItems="center" justifyContent="center" rounded="xl" border borderColor="border-charcoal-outline" bg="bg-deep-charcoal" shadow="lg">
|
|
<Users size={24} color="#198CFF" />
|
|
</Stack>
|
|
<Heading level={1}>Drivers</Heading>
|
|
</Stack>
|
|
|
|
<Text size="lg" color="text-gray-400" block leading="relaxed">
|
|
Meet the racers who make every lap count. From rookies to champions, track their journey and see who's dominating the grid.
|
|
</Text>
|
|
|
|
<Stack display="flex" flexWrap="wrap" gap={6} mt={6}>
|
|
{stats.map((stat, index) => (
|
|
<Stack key={index} direction="row" align="center" gap={2}>
|
|
<Stack
|
|
w="2"
|
|
h="2"
|
|
rounded="full"
|
|
bg={stat.color?.replace('text-', 'bg-') || 'bg-primary-blue'}
|
|
animate={stat.animate ? 'pulse' : 'none'}
|
|
/>
|
|
<Text size="sm" color="text-gray-400">
|
|
<Text as="span" weight="semibold" color="text-white">{stat.value}</Text> {stat.label}
|
|
</Text>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack gap={2}>
|
|
<Button
|
|
variant="primary"
|
|
onClick={onViewLeaderboard}
|
|
icon={<Trophy size={20} />}
|
|
>
|
|
View Leaderboard
|
|
</Button>
|
|
<Text size="xs" color="text-gray-500" align="center" block>
|
|
See full driver rankings
|
|
</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|