65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
|
|
|
|
import { Icon } from '@/ui/Icon';
|
|
import { PageHero } from '@/ui/PageHero';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Calendar, Trophy, Users, Zap } from 'lucide-react';
|
|
|
|
interface RaceResultsHeaderProps {
|
|
raceTrack: string | undefined;
|
|
raceScheduledAt: string | undefined;
|
|
totalDrivers: number | undefined;
|
|
leagueName: string | undefined;
|
|
raceSOF: number | null | undefined;
|
|
}
|
|
|
|
const DEFAULT_RACE_TRACK = 'Race';
|
|
|
|
export function RaceResultsHeader({
|
|
raceTrack = 'Race',
|
|
raceScheduledAt,
|
|
totalDrivers,
|
|
leagueName,
|
|
raceSOF
|
|
}: RaceResultsHeaderProps) {
|
|
const stats = [
|
|
...(raceScheduledAt ? [{
|
|
icon: Calendar,
|
|
value: new Date(raceScheduledAt).toLocaleDateString('en-US', {
|
|
weekday: 'short',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
}),
|
|
label: '',
|
|
color: 'text-gray-400'
|
|
}] : []),
|
|
...(totalDrivers !== undefined && totalDrivers !== null ? [{
|
|
icon: Users,
|
|
value: totalDrivers,
|
|
label: 'drivers classified',
|
|
color: 'text-gray-400'
|
|
}] : []),
|
|
...(leagueName ? [{
|
|
value: leagueName,
|
|
label: '',
|
|
color: 'text-primary-blue'
|
|
}] : [])
|
|
];
|
|
|
|
return (
|
|
<PageHero
|
|
title={`${raceTrack || DEFAULT_RACE_TRACK} Results`}
|
|
icon={Trophy}
|
|
stats={stats}
|
|
>
|
|
{raceSOF && (
|
|
<Stack direction="row" align="center" gap={1.5} mt={4}>
|
|
<Icon icon={Zap} size={4} color="text-warning-amber" />
|
|
<Text size="sm" color="text-warning-amber">SOF {raceSOF}</Text>
|
|
</Stack>
|
|
)}
|
|
</PageHero>
|
|
);
|
|
}
|