68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { UpcomingRaceItem } from '@/components/races/UpcomingRaceItem';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import { Box } from '@/ui/Box';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Link } from '@/ui/Link';
|
|
import { Text } from '@/ui/Text';
|
|
|
|
interface Race {
|
|
id: string;
|
|
track: string;
|
|
car: string;
|
|
formattedDate: string;
|
|
}
|
|
|
|
interface RecentRacesPanelProps {
|
|
races: Race[];
|
|
}
|
|
|
|
/**
|
|
* RecentRacesPanel - Semantic section for upcoming/recent races.
|
|
*/
|
|
export function RecentRacesPanel({ races }: RecentRacesPanelProps) {
|
|
return (
|
|
<Box as="section" bg="surface-charcoal" p={6} border borderColor="border-gray" rounded="none">
|
|
<Box display="flex" alignItems="center" justifyContent="between" mb={6}>
|
|
<Heading level={3} fontSize="xs" weight="bold" letterSpacing="widest" color="text-white">
|
|
UPCOMING RACES
|
|
</Heading>
|
|
<Link
|
|
href={routes.public.races}
|
|
size="xs"
|
|
weight="bold"
|
|
letterSpacing="widest"
|
|
variant="primary"
|
|
hoverColor="text-white"
|
|
transition
|
|
>
|
|
FULL SCHEDULE →
|
|
</Link>
|
|
</Box>
|
|
|
|
<Box display="flex" flexDirection="col" gap={3}>
|
|
{races.length === 0 ? (
|
|
<Box py={12} border borderStyle="dashed" borderColor="border-gray/30" bg="graphite-black/50" display="flex" alignItems="center" justifyContent="center">
|
|
<Text size="xs" font="mono" uppercase letterSpacing="widest" color="text-gray-600">
|
|
No races scheduled
|
|
</Text>
|
|
</Box>
|
|
) : (
|
|
races.slice(0, 3).map((race) => (
|
|
<UpcomingRaceItem
|
|
key={race.id}
|
|
track={race.track}
|
|
car={race.car}
|
|
formattedDate={race.formattedDate}
|
|
formattedTime="20:00 GMT"
|
|
isMyLeague={false}
|
|
/>
|
|
))
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|