65 lines
1.9 KiB
TypeScript
65 lines
1.9 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) {
|
|
return (
|
|
<PageHero
|
|
title={`${raceTrack || DEFAULT_RACE_TRACK} Results`}
|
|
>
|
|
<Stack gap={4}>
|
|
<Stack direction="row" align="center" gap={4} wrap>
|
|
{raceScheduledAt && (
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Calendar} size={4} intent="low" />
|
|
<Text size="sm" variant="low">
|
|
{new Date(raceScheduledAt).toLocaleDateString('en-US', {
|
|
weekday: 'short',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
})}
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
{totalDrivers !== undefined && totalDrivers !== null && (
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Users} size={4} intent="low" />
|
|
<Text size="sm" variant="low">{totalDrivers} drivers classified</Text>
|
|
</Stack>
|
|
)}
|
|
{leagueName && (
|
|
<Text size="sm" variant="primary">{leagueName}</Text>
|
|
)}
|
|
</Stack>
|
|
|
|
{raceSOF && (
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Icon icon={Zap} size={4} intent="warning" />
|
|
<Text size="sm" variant="warning">SOF {raceSOF}</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</PageHero>
|
|
);
|
|
}
|