72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Panel } from '@/ui/Panel';
|
|
import { Text } from '@/ui/Text';
|
|
import { CalendarDays, Clock, Flag, LucideIcon, Trophy, Zap } from 'lucide-react';
|
|
|
|
interface RacePageHeaderProps {
|
|
totalCount: number;
|
|
scheduledCount: number;
|
|
runningCount: number;
|
|
completedCount: number;
|
|
}
|
|
|
|
export function RacePageHeader({
|
|
totalCount,
|
|
scheduledCount,
|
|
runningCount,
|
|
completedCount,
|
|
}: RacePageHeaderProps) {
|
|
return (
|
|
<Panel
|
|
variant="precision"
|
|
padding="lg"
|
|
>
|
|
<Stack gap={8}>
|
|
<Stack gap={2}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Icon icon={Flag} size={6} intent="primary" />
|
|
<Heading level={1} uppercase weight="bold">Race Dashboard</Heading>
|
|
</Stack>
|
|
<Text variant="low" size="sm">
|
|
Precision tracking for upcoming sessions and live events.
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Grid cols={2} mdCols={4} gap={6}>
|
|
<StatItem icon={CalendarDays} label="Total Sessions" value={totalCount} />
|
|
<StatItem icon={Clock} label="Scheduled" value={scheduledCount} variant="primary" />
|
|
<StatItem icon={Zap} label="Live Now" value={runningCount} variant="success" />
|
|
<StatItem icon={Trophy} label="Completed" value={completedCount} variant="low" />
|
|
</Grid>
|
|
</Stack>
|
|
</Panel>
|
|
);
|
|
}
|
|
|
|
function StatItem({
|
|
icon,
|
|
label,
|
|
value,
|
|
variant = 'high'
|
|
}: {
|
|
icon: LucideIcon,
|
|
label: string,
|
|
value: number,
|
|
variant?: 'high' | 'low' | 'primary' | 'success' | 'warning' | 'critical'
|
|
}) {
|
|
return (
|
|
<Stack gap={2}>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={icon} size={3} intent={variant === 'high' ? 'low' : variant} />
|
|
<Text size="xs" variant="low" weight="bold" uppercase letterSpacing="widest">{label}</Text>
|
|
</Stack>
|
|
<Text size="3xl" weight="bold" variant={variant} mono>{value}</Text>
|
|
</Stack>
|
|
);
|
|
}
|