mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-21 13:49:59 +01:00
parent 69c9305d59
commit ac37871bef
11 changed files with 280 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
apps/website/components/leagues/LeagueSchedulePanel.tsx
View File

@@ -1,9 +1,8 @@
'use client';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Clock, MapPin } from 'lucide-react';
import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
import { useRouter } from 'next/navigation';
import { routes } from '@/lib/routing/RouteConfig';
interface RaceEvent {
id: string;
@@ -20,79 +19,21 @@ interface LeagueSchedulePanelProps {
}
export function LeagueSchedulePanel({ events }: LeagueSchedulePanelProps) {
const router = useRouter();
const races = events.map(event => ({
id: event.id,
track: event.trackName,
car: 'TBA', // Not provided in event
leagueName: null,
time: event.time,
status: (event.status === 'completed' ? 'completed' : 'scheduled') as any
}));
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>
<RaceScheduleTable
races={races}
onRaceClick={(id) => router.push(routes.race.detail(id))}
/>
);
}