99 lines
3.7 KiB
TypeScript
99 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Clock, MapPin } from 'lucide-react';
|
|
|
|
interface RaceEvent {
|
|
id: string;
|
|
title: string;
|
|
trackName: string;
|
|
date: string;
|
|
time: string;
|
|
status: 'upcoming' | 'live' | 'completed';
|
|
strengthOfField?: number;
|
|
}
|
|
|
|
interface LeagueSchedulePanelProps {
|
|
events: RaceEvent[];
|
|
}
|
|
|
|
export function LeagueSchedulePanel({ events }: LeagueSchedulePanelProps) {
|
|
return (
|
|
<Stack as="section">
|
|
<Stack gap={4}>
|
|
{events.map((event) => (
|
|
<Stack
|
|
as="article"
|
|
key={event.id}
|
|
display="flex"
|
|
alignItems="center"
|
|
gap={6}
|
|
p={4}
|
|
border
|
|
borderColor="zinc-800"
|
|
bg="zinc-900/50"
|
|
hoverBorderColor="zinc-700"
|
|
transition
|
|
>
|
|
<Stack display="flex" flexDirection="col" alignItems="center" justifyContent="center" w="16" h="16" borderRight borderColor="zinc-800" pr={6}>
|
|
<Text size="xs" weight="bold" color="text-zinc-500" uppercase>
|
|
{new Date(event.date).toLocaleDateString('en-US', { month: 'short' })}
|
|
</Text>
|
|
<Text size="2xl" weight="bold" color="text-white">
|
|
{new Date(event.date).toLocaleDateString('en-US', { day: 'numeric' })}
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Stack flexGrow={1}>
|
|
<Heading level={3} fontSize="lg" weight="bold" color="text-white">{event.title}</Heading>
|
|
<Stack direction="row" gap={4} mt={1}>
|
|
<Stack display="flex" alignItems="center" gap={1.5}>
|
|
<Stack color="text-zinc-600"><MapPin size={14} /></Stack>
|
|
<Text size="sm" color="text-zinc-400">{event.trackName}</Text>
|
|
</Stack>
|
|
<Stack display="flex" alignItems="center" gap={1.5}>
|
|
<Stack color="text-zinc-600"><Clock size={14} /></Stack>
|
|
<Text size="sm" color="text-zinc-400">{event.time}</Text>
|
|
</Stack>
|
|
{event.strengthOfField && (
|
|
<Stack display="flex" alignItems="center" gap={1.5}>
|
|
<Text size="xs" weight="bold" color="text-zinc-500" uppercase>SOF</Text>
|
|
<Text size="sm" color="text-zinc-300" font="mono">{event.strengthOfField}</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
|
|
<Stack display="flex" alignItems="center" gap={3}>
|
|
{event.status === 'live' && (
|
|
<Stack display="flex" alignItems="center" gap={1.5} px={2} py={1} bg="red-500/10" border borderColor="red-500/20">
|
|
<Stack w="1.5" h="1.5" rounded="full" bg="bg-red-500" animate="pulse" />
|
|
<Text size="xs" weight="bold" color="text-red-500" uppercase letterSpacing="0.05em">
|
|
Live
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
{event.status === 'upcoming' && (
|
|
<Stack px={2} py={1} bg="blue-500/10" border borderColor="blue-500/20">
|
|
<Text size="xs" weight="bold" color="text-blue-500" uppercase letterSpacing="0.05em">
|
|
Upcoming
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
{event.status === 'completed' && (
|
|
<Stack px={2} py={1} bg="zinc-800" border borderColor="zinc-700">
|
|
<Text size="xs" weight="bold" color="text-zinc-500" uppercase letterSpacing="0.05em">
|
|
Results
|
|
</Text>
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
))}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|