81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Flag, CalendarDays, Clock, Zap, Trophy, LucideIcon } from 'lucide-react';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Box } from '@/ui/Box';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Surface } from '@/ui/Surface';
|
|
|
|
interface RacePageHeaderProps {
|
|
totalCount: number;
|
|
scheduledCount: number;
|
|
runningCount: number;
|
|
completedCount: number;
|
|
}
|
|
|
|
export function RacePageHeader({
|
|
totalCount,
|
|
scheduledCount,
|
|
runningCount,
|
|
completedCount,
|
|
}: RacePageHeaderProps) {
|
|
return (
|
|
<Surface
|
|
bg="bg-surface-charcoal"
|
|
rounded="xl"
|
|
border
|
|
borderColor="border-outline-steel"
|
|
padding={6}
|
|
position="relative"
|
|
overflow="hidden"
|
|
>
|
|
{/* Background Accent */}
|
|
<Box
|
|
position="absolute"
|
|
top={0}
|
|
left={0}
|
|
right={0}
|
|
height="1"
|
|
bg="bg-primary-accent"
|
|
/>
|
|
|
|
<Stack gap={6}>
|
|
<Stack gap={2}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Icon icon={Flag} size={6} color="var(--primary-accent)" />
|
|
<Heading level={1}>RACE DASHBOARD</Heading>
|
|
</Stack>
|
|
<Text color="text-gray-400" size="sm">
|
|
Precision tracking for upcoming sessions and live events.
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Grid cols={2} mdCols={4} gap={4}>
|
|
<StatItem icon={CalendarDays} label="TOTAL SESSIONS" value={totalCount} />
|
|
<StatItem icon={Clock} label="SCHEDULED" value={scheduledCount} color="text-primary-accent" />
|
|
<StatItem icon={Zap} label="LIVE NOW" value={runningCount} color="text-success-green" />
|
|
<StatItem icon={Trophy} label="COMPLETED" value={completedCount} color="text-gray-400" />
|
|
</Grid>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|
|
|
|
function StatItem({ icon, label, value, color = 'text-white' }: { icon: LucideIcon, label: string, value: number, color?: string }) {
|
|
return (
|
|
<Box p={4} bg="bg-base-black" bgOpacity={0.5} border borderColor="border-outline-steel">
|
|
<Stack gap={1}>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={icon} size={3} color={color === 'text-white' ? '#9ca3af' : undefined} groupHoverTextColor={color !== 'text-white' ? color : undefined} />
|
|
<Text size="xs" color="text-gray-500" weight="bold" uppercase>{label}</Text>
|
|
</Stack>
|
|
<Text size="2xl" weight="bold" color={color}>{value}</Text>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|