website refactor

apps/website/templates/LeagueScheduleTemplate.tsx

@@ -2,27 +2,32 @@
 
 import React from 'react';
 import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Heading } from '@/ui/Heading';
+import { LeagueSchedulePanel } from '@/components/leagues/LeagueSchedulePanel';
 import type { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
-import { LeagueSchedule } from '@/components/leagues/LeagueSchedule';
 
 interface LeagueScheduleTemplateProps {
   viewData: LeagueScheduleViewData;
 }
 
 export function LeagueScheduleTemplate({ viewData }: LeagueScheduleTemplateProps) {
+  const events = viewData.races.map(race => ({
+    id: race.id,
+    title: race.name || `Race ${race.id.substring(0, 4)}`,
+    trackName: race.track || 'TBA',
+    date: race.scheduledAt,
+    time: new Date(race.scheduledAt).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
+    status: (race.status as 'upcoming' | 'live' | 'completed') || 'upcoming'
+  }));
+
   return (
-    <Stack gap={6}>
-      <Box>
-        <Heading level={2}>Race Schedule</Heading>
-        <Text size="sm" color="text-gray-400" block mt={1}>
-          Upcoming and completed races for this season
-        </Text>
+    <Box display="flex" flexDirection="col" gap={8}>
+      <Box as="header" display="flex" flexDirection="col" gap={2}>
+        <Text as="h2" size="xl" weight="bold" color="text-white" uppercase letterSpacing="tight">Race Schedule</Text>
+        <Text size="sm" color="text-zinc-500">Upcoming and past events for this season.</Text>
       </Box>
 
-      <LeagueSchedule leagueId={viewData.leagueId} />
-    </Stack>
+      <LeagueSchedulePanel events={events} />
+    </Box>
   );
 }