63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
|
|
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import { Card } from '@/ui/Card';
|
|
import { MinimalEmptyState } from '@/components/shared/state/EmptyState';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Link } from '@/ui/Link';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { UpcomingRaceItem } from '@/components/races/UpcomingRaceItem';
|
|
import { UpcomingRacesList } from '@/components/races/UpcomingRacesList';
|
|
import { Calendar } from 'lucide-react';
|
|
|
|
interface UpcomingRace {
|
|
id: string;
|
|
track: string;
|
|
car: string;
|
|
formattedDate: string;
|
|
formattedTime: string;
|
|
isMyLeague: boolean;
|
|
}
|
|
|
|
interface UpcomingRacesProps {
|
|
races: UpcomingRace[];
|
|
hasRaces: boolean;
|
|
}
|
|
|
|
export function UpcomingRaces({ races, hasRaces }: UpcomingRacesProps) {
|
|
return (
|
|
<Card>
|
|
<Stack direction="row" align="center" justify="between" mb={4}>
|
|
<Heading level={3} icon={<Icon icon={Calendar} size={5} color="var(--primary-blue)" />}>
|
|
Upcoming Races
|
|
</Heading>
|
|
<Link href={routes.public.races} variant="primary">
|
|
<Text size="xs">View all</Text>
|
|
</Link>
|
|
</Stack>
|
|
{hasRaces ? (
|
|
<UpcomingRacesList>
|
|
{races.slice(0, 5).map((race) => (
|
|
<UpcomingRaceItem
|
|
key={race.id}
|
|
track={race.track}
|
|
car={race.car}
|
|
formattedDate={race.formattedDate}
|
|
formattedTime={race.formattedTime}
|
|
isMyLeague={race.isMyLeague}
|
|
/>
|
|
))}
|
|
</UpcomingRacesList>
|
|
) : (
|
|
<MinimalEmptyState
|
|
icon={Calendar}
|
|
title="No upcoming races"
|
|
description="Check back later for new events"
|
|
/>
|
|
)}
|
|
</Card>
|
|
);
|
|
}
|