website refactor

apps/website/templates/LeagueScheduleTemplate.tsx

@@ -1,7 +1,16 @@
-import { LeagueScheduleViewData } from '@/lib/view-data/leagues/LeagueScheduleViewData';
+'use client';
+
+import React from 'react';
 import { Card } from '@/ui/Card';
-import { Section } from '@/ui/Section';
-import { Calendar, Clock, MapPin, Car, Trophy } from 'lucide-react';
+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';
 
 interface LeagueScheduleTemplateProps {
   viewData: LeagueScheduleViewData;
@@ -9,82 +18,33 @@ interface LeagueScheduleTemplateProps {
 
 export function LeagueScheduleTemplate({ viewData }: LeagueScheduleTemplateProps) {
   return (
-    <Section>
-      <div className="flex items-center justify-between mb-6">
-        <div>
-          <h2 className="text-xl font-semibold text-white">Race Schedule</h2>
-          <p className="text-sm text-gray-400 mt-1">
-            Upcoming and completed races for this season
-          </p>
-        </div>
-      </div>
+    <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>
 
       {viewData.races.length === 0 ? (
         <Card>
-          <div className="text-center py-12">
-            <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-performance-green/10 flex items-center justify-center">
-              <Calendar className="w-8 h-8 text-performance-green" />
-            </div>
-            <p className="font-semibold text-lg text-white mb-2">No Races Scheduled</p>
-            <p className="text-sm text-gray-400">The race schedule will appear here once events are added.</p>
-          </div>
+          <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>
       ) : (
-        <div className="space-y-4">
+        <Stack gap={4}>
           {viewData.races.map((race) => (
-            <Card key={race.id}>
-              <div className="flex items-start justify-between">
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-3 mb-3">
-                    <div className={`w-3 h-3 rounded-full ${race.isPast ? 'bg-performance-green' : 'bg-primary-blue'}`} />
-                    <h3 className="font-semibold text-white text-lg">{race.name}</h3>
-                    <span className={`px-2 py-1 text-xs font-medium rounded-full ${
-                      race.status === 'completed'
-                        ? 'bg-performance-green/20 text-performance-green'
-                        : 'bg-primary-blue/20 text-primary-blue'
-                    }`}>
-                      {race.status === 'completed' ? 'Completed' : 'Scheduled'}
-                    </span>
-                  </div>
-
-                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
-                    <div className="flex items-center gap-2 text-sm text-gray-300">
-                      <Calendar className="w-4 h-4 text-gray-400" />
-                      <span>{new Date(race.scheduledAt).toLocaleDateString()}</span>
-                    </div>
-
-                    <div className="flex items-center gap-2 text-sm text-gray-300">
-                      <Clock className="w-4 h-4 text-gray-400" />
-                      <span>{new Date(race.scheduledAt).toLocaleTimeString()}</span>
-                    </div>
-
-                    {race.track && (
-                      <div className="flex items-center gap-2 text-sm text-gray-300">
-                        <MapPin className="w-4 h-4 text-gray-400" />
-                        <span className="truncate">{race.track}</span>
-                      </div>
-                    )}
-
-                    {race.car && (
-                      <div className="flex items-center gap-2 text-sm text-gray-300">
-                        <Car className="w-4 h-4 text-gray-400" />
-                        <span className="truncate">{race.car}</span>
-                      </div>
-                    )}
-                  </div>
-
-                  {race.sessionType && (
-                    <div className="flex items-center gap-2 text-sm text-gray-400">
-                      <Trophy className="w-4 h-4" />
-                      <span>{race.sessionType} Session</span>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </Card>
+            <ScheduleRaceCard key={race.id} race={race} />
           ))}
-        </div>
+        </Stack>
       )}
-    </Section>
+    </Stack>
   );
-}
+}