77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Calendar, Clock, MapPin, Car, Trophy } from 'lucide-react';
|
|
import { Card } from '@/ui/Card';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Badge } from '@/ui/Badge';
|
|
import { Grid } from '@/ui/Grid';
|
|
import { Icon } from '@/ui/Icon';
|
|
|
|
interface Race {
|
|
id: string;
|
|
name: string;
|
|
track?: string;
|
|
car?: string;
|
|
scheduledAt: string;
|
|
status: string;
|
|
sessionType?: string;
|
|
isPast?: boolean;
|
|
}
|
|
|
|
interface ScheduleRaceCardProps {
|
|
race: Race;
|
|
}
|
|
|
|
export function ScheduleRaceCard({ race }: ScheduleRaceCardProps) {
|
|
return (
|
|
<Card>
|
|
<Stack gap={4}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box w="3" h="3" rounded="full" bg={race.isPast ? 'bg-performance-green' : 'bg-primary-blue'} />
|
|
<Heading level={3} fontSize="lg">{race.name}</Heading>
|
|
<Badge variant={race.status === 'completed' ? 'success' : 'primary'}>
|
|
{race.status === 'completed' ? 'Completed' : 'Scheduled'}
|
|
</Badge>
|
|
</Stack>
|
|
|
|
<Grid cols={4} gap={4}>
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Calendar} size={4} color="#9ca3af" />
|
|
<Text size="sm" color="text-gray-300">{new Date(race.scheduledAt).toLocaleDateString()}</Text>
|
|
</Stack>
|
|
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Clock} size={4} color="#9ca3af" />
|
|
<Text size="sm" color="text-gray-300">{new Date(race.scheduledAt).toLocaleTimeString()}</Text>
|
|
</Stack>
|
|
|
|
{race.track && (
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={MapPin} size={4} color="#9ca3af" />
|
|
<Text size="sm" color="text-gray-300" truncate>{race.track}</Text>
|
|
</Stack>
|
|
)}
|
|
|
|
{race.car && (
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Car} size={4} color="#9ca3af" />
|
|
<Text size="sm" color="text-gray-300" truncate>{race.car}</Text>
|
|
</Stack>
|
|
)}
|
|
</Grid>
|
|
|
|
{race.sessionType && (
|
|
<Stack direction="row" align="center" gap={2}>
|
|
<Icon icon={Trophy} size={4} color="#9ca3af" />
|
|
<Text size="sm" color="text-gray-400">{race.sessionType} Session</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
}
|