website refactor

apps/website/templates/RacesTemplate.tsx

@@ -1,18 +1,20 @@
 'use client';
 
 import React from 'react';
-import { Box } from '@/ui/Box';
-import { Stack } from '@/ui/Stack';
 import { Container } from '@/ui/Container';
-import { RaceFilterModal } from '@/ui/RaceFilterModal';
-import type { RacesViewData } from '@/lib/view-data/RacesViewData';
-import { RacePageHeader } from '@/ui/RacePageHeader';
-import { LiveRacesBanner } from '@/components/races/LiveRacesBanner';
-import { RaceFilterBar } from '@/components/races/RaceFilterBar';
-import { RaceList } from '@/components/races/RaceList';
-import { RaceSidebar } from '@/components/races/RaceSidebar';
+import { Stack } from '@/ui/Stack';
 import { Grid } from '@/ui/Grid';
 import { GridItem } from '@/ui/GridItem';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { RaceFilterModal } from '@/ui/RaceFilterModal';
+import type { RacesViewData } from '@/lib/view-data/RacesViewData';
+import { RacesHeader } from '@/components/races/RacesHeader';
+import { LiveRacesBanner } from '@/components/races/LiveRacesBanner';
+import { RaceFilterBar } from '@/components/races/RaceFilterBar';
+import { RaceScheduleTable } from '@/components/races/RaceScheduleTable';
+import { RaceSidebar } from '@/components/races/RaceSidebar';
+import type { SessionStatus } from '@/components/races/SessionStatusBadge';
 
 export type TimeFilter = 'all' | 'upcoming' | 'live' | 'past';
 export type RaceStatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
@@ -49,10 +51,10 @@ export function RacesTemplate({
   setShowFilterModal,
 }: RacesTemplateProps) {
   return (
-    <Box as="main">
-      <Container size="lg" py={8}>
+    <Box as="main" minHeight="screen" bg="bg-base-black" py={8}>
+      <Container size="lg">
         <Stack gap={8}>
-          <RacePageHeader 
+          <RacesHeader 
             totalCount={viewData.totalCount}
             scheduledCount={viewData.scheduledCount}
             runningCount={viewData.runningCount}
@@ -76,11 +78,22 @@ export function RacesTemplate({
                   onShowMoreFilters={() => setShowFilterModal(true)}
                 />
 
-                <RaceList 
-                  racesByDate={viewData.racesByDate}
-                  totalCount={viewData.totalCount}
-                  onRaceClick={onRaceClick}
-                />
+                <Box as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" overflow="hidden">
+                  <Box p={4} borderBottom borderColor="border-outline-steel" bg="bg-base-black" bgOpacity={0.2}>
+                    <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">Race Schedule</Text>
+                  </Box>
+                  <RaceScheduleTable 
+                    races={viewData.races.map(race => ({
+                      id: race.id,
+                      track: race.track,
+                      car: race.car,
+                      leagueName: race.leagueName,
+                      time: race.timeLabel,
+                      status: race.status as SessionStatus
+                    }))}
+                    onRaceClick={onRaceClick}
+                  />
+                </Box>
               </Stack>
             </GridItem>