88 lines
3.3 KiB
TypeScript
88 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Users, Trophy, LucideIcon } from 'lucide-react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Button } from '@/ui/Button';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { DecorativeBlur } from '@/ui/DecorativeBlur';
|
|
|
|
interface StatItemProps {
|
|
label: string;
|
|
value: string | number;
|
|
color: string;
|
|
animate?: boolean;
|
|
}
|
|
|
|
function StatItem({ label, value, color, animate }: StatItemProps) {
|
|
return (
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Box style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', backgroundColor: color }} className={animate ? 'animate-pulse' : ''} />
|
|
<Text size="sm" color="text-gray-400">
|
|
<Text weight="semibold" color="text-white">{value}</Text> {label}
|
|
</Text>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
interface DriversHeroProps {
|
|
driverCount: number;
|
|
activeCount: number;
|
|
totalWins: number;
|
|
totalRaces: number;
|
|
onViewLeaderboard: () => void;
|
|
}
|
|
|
|
export function DriversHero({
|
|
driverCount,
|
|
activeCount,
|
|
totalWins,
|
|
totalRaces,
|
|
onViewLeaderboard,
|
|
}: DriversHeroProps) {
|
|
return (
|
|
<Surface variant="muted" rounded="2xl" border padding={8} style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.2), rgba(38, 38, 38, 0.8), #0f1115)', borderColor: 'rgba(59, 130, 246, 0.3)' }}>
|
|
<DecorativeBlur color="blue" size="lg" position="top-right" opacity={10} />
|
|
<DecorativeBlur color="yellow" size="md" position="bottom-left" opacity={5} />
|
|
|
|
<Stack direction="row" align="center" justify="between" wrap gap={8} style={{ position: 'relative', zIndex: 10 }}>
|
|
<Box style={{ maxWidth: '42rem' }}>
|
|
<Stack direction="row" align="center" gap={3} mb={4}>
|
|
<Surface variant="muted" rounded="xl" padding={3} style={{ background: 'linear-gradient(to bottom right, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05))', border: '1px solid rgba(59, 130, 246, 0.2)' }}>
|
|
<Icon icon={Users} size={6} color="#3b82f6" />
|
|
</Surface>
|
|
<Heading level={1}>Drivers</Heading>
|
|
</Stack>
|
|
<Text size="lg" color="text-gray-400" block mb={6} style={{ lineHeight: 1.625 }}>
|
|
Meet the racers who make every lap count. From rookies to champions, track their journey and see who's dominating the grid.
|
|
</Text>
|
|
|
|
{/* Quick Stats */}
|
|
<Stack direction="row" gap={6} wrap>
|
|
<StatItem label="drivers" value={driverCount} color="#3b82f6" />
|
|
<StatItem label="active" value={activeCount} color="#10b981" animate />
|
|
<StatItem label="total wins" value={totalWins.toLocaleString()} color="#f59e0b" />
|
|
<StatItem label="races" value={totalRaces.toLocaleString()} color="#00f2ff" />
|
|
</Stack>
|
|
</Box>
|
|
|
|
{/* CTA */}
|
|
<Stack align="center" gap={4}>
|
|
<Button
|
|
variant="primary"
|
|
onClick={onViewLeaderboard}
|
|
icon={<Icon icon={Trophy} size={5} />}
|
|
>
|
|
View Leaderboard
|
|
</Button>
|
|
<Text size="xs" color="text-gray-500">See full driver rankings</Text>
|
|
</Stack>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|