49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { Flag, CalendarDays, Clock, Zap, Trophy } from 'lucide-react';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Hero } from '@/ui/Hero';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Box } from '@/ui/Box';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { StatBox } from '@/ui/StatBox';
|
|
|
|
interface RacePageHeaderProps {
|
|
totalCount: number;
|
|
scheduledCount: number;
|
|
runningCount: number;
|
|
completedCount: number;
|
|
}
|
|
|
|
export function RacePageHeader({
|
|
totalCount,
|
|
scheduledCount,
|
|
runningCount,
|
|
completedCount,
|
|
}: RacePageHeaderProps) {
|
|
return (
|
|
<Hero variant="primary">
|
|
<Stack gap={2}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box p={2} bg="bg-primary-blue/10" rounded="lg">
|
|
<Icon icon={Flag} size={6} color="rgb(59, 130, 246)" />
|
|
</Box>
|
|
<Heading level={1}>Race Calendar</Heading>
|
|
</Stack>
|
|
<Text color="text-gray-400" maxWidth="42rem">
|
|
Track upcoming races, view live events, and explore results across all your leagues.
|
|
</Text>
|
|
</Stack>
|
|
|
|
{/* Quick Stats */}
|
|
<Grid cols={2} mdCols={4} gap={4} mt={6}>
|
|
<StatBox icon={CalendarDays} label="Total" value={totalCount} />
|
|
<StatBox icon={Clock} label="Scheduled" value={scheduledCount} color="rgb(59, 130, 246)" />
|
|
<StatBox icon={Zap} label="Live Now" value={runningCount} color="rgb(16, 185, 129)" />
|
|
<StatBox icon={Trophy} label="Completed" value={completedCount} />
|
|
</Grid>
|
|
</Hero>
|
|
);
|
|
}
|