69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Calendar } from 'lucide-react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Box } from '@/ui/Box';
|
|
import { Text } from '@/ui/Text';
|
|
import { Link } from '@/ui/Link';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
|
|
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 gap={4}>
|
|
<Stack direction="row" align="center" justify="between">
|
|
<Heading level={3} icon={<Calendar style={{ width: '1.25rem', height: '1.25rem', color: '#3b82f6' }} />}>
|
|
Upcoming Races
|
|
</Heading>
|
|
<Box>
|
|
<Link href={routes.public.races} variant="primary">
|
|
<Text size="xs">View all</Text>
|
|
</Link>
|
|
</Box>
|
|
</Stack>
|
|
{hasRaces ? (
|
|
<Stack gap={3}>
|
|
{races.slice(0, 5).map((race) => (
|
|
<Box key={race.id} style={{ padding: '0.75rem', backgroundColor: '#0f1115', borderRadius: '0.5rem' }}>
|
|
<Text color="text-white" weight="medium" block>{race.track}</Text>
|
|
<Text size="sm" color="text-gray-400" block>{race.car}</Text>
|
|
<Stack direction="row" align="center" gap={2} mt={1}>
|
|
<Text size="xs" color="text-gray-500">{race.formattedDate}</Text>
|
|
<Text size="xs" color="text-gray-500">•</Text>
|
|
<Text size="xs" color="text-gray-500">{race.formattedTime}</Text>
|
|
</Stack>
|
|
{race.isMyLeague && (
|
|
<Box style={{ display: 'inline-block', marginTop: '0.25rem', padding: '0.125rem 0.5rem', borderRadius: '9999px', backgroundColor: 'rgba(16, 185, 129, 0.2)', color: '#10b981', fontSize: '0.75rem', fontWeight: 500 }}>
|
|
Your League
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
))}
|
|
</Stack>
|
|
) : (
|
|
<Box py={4}>
|
|
<Text size="sm" color="text-gray-500" block style={{ textAlign: 'center' }}>No upcoming races</Text>
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|