wip

apps/website/templates/LeagueScheduleTemplate.tsx

@@ -1,16 +1,12 @@
 'use client';
 
 import React from '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 { Icon } from '@/ui/Icon';
-import { Calendar } from 'lucide-react';
 import type { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
-import { ScheduleRaceCard } from '@/components/leagues/ScheduleRaceCard';
-import { Surface } from '@/ui/Surface';
+import LeagueSchedule from '@/components/leagues/LeagueSchedule';
 
 interface LeagueScheduleTemplateProps {
   viewData: LeagueScheduleViewData;
@@ -26,25 +22,7 @@ export function LeagueScheduleTemplate({ viewData }: LeagueScheduleTemplateProps
         </Text>
       </Box>
 
-      {viewData.races.length === 0 ? (
-        <Card>
-          <Stack align="center" py={12} gap={4}>
-            <Surface variant="muted" rounded="full" padding={4} style={{ backgroundColor: 'rgba(16, 185, 129, 0.1)' }}>
-              <Icon icon={Calendar} size={8} color="#10b981" />
-            </Surface>
-            <Box style={{ textAlign: 'center' }}>
-              <Text weight="semibold" size="lg" color="text-white" block mb={2}>No Races Scheduled</Text>
-              <Text size="sm" color="text-gray-400">The race schedule will appear here once events are added.</Text>
-            </Box>
-          </Stack>
-        </Card>
-      ) : (
-        <Stack gap={4}>
-          {viewData.races.map((race) => (
-            <ScheduleRaceCard key={race.id} race={race} />
-          ))}
-        </Stack>
-      )}
+      <LeagueSchedule leagueId={viewData.leagueId} />
     </Stack>
   );
 }