website refactor

apps/website/templates/RacesIndexTemplate.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { Container } from '@/ui/Container';
-import { Stack } from '@/ui/Stack';
+import { Section } from '@/ui/Section';
 import { RacesLiveRail } from '@/components/races/RacesLiveRail';
 import { RacesCommandBar } from '@/components/races/RacesCommandBar';
 import { NextUpRacePanel } from '@/components/races/NextUpRacePanel';
@@ -10,24 +10,19 @@ import { RacesDayGroup } from '@/components/races/RacesDayGroup';
 import { RacesEmptyState } from '@/components/races/RacesEmptyState';
 import { RaceFilterModal } from '@/components/races/RaceFilterModal';
 import { PageHeader } from '@/components/shared/PageHeader';
-import type { RacesViewData } from '@/lib/view-data/RacesViewData';
+import type { RacesViewData, RaceViewData } from '@/lib/view-data/RacesViewData';
 
 export interface RacesIndexTemplateProps {
   viewData: RacesViewData & {
-    racesByDate: Array<{
-      dateKey: string;
-      dateLabel: string;
-      races: any[];
-    }>;
-    nextUpRace?: any;
+    nextUpRace?: RaceViewData;
   };
   // Filters
   statusFilter: string;
-  setStatusFilter: (filter: any) => void;
+  setStatusFilter: (filter: string) => void;
   leagueFilter: string;
   setLeagueFilter: (filter: string) => void;
   timeFilter: string;
-  setTimeFilter: (filter: any) => void;
+  setTimeFilter: (filter: string) => void;
   // Actions
   onRaceClick: (raceId: string) => void;
   // UI State
@@ -50,20 +45,22 @@ export function RacesIndexTemplate({
   const hasRaces = viewData.racesByDate.length > 0;
 
   return (
-    <Container size="lg">
-      <Stack gap={8} paddingY={12}>
-        <PageHeader 
-          title="Races" 
-          subtitle="Live Sessions & Upcoming Events" 
-        />
+    <Section variant="default" padding="lg">
+      <PageHeader 
+        title="Races" 
+        subtitle="Live Sessions & Upcoming Events" 
+      />
 
-        {/* 1. Status Rail: Live sessions first */}
+      {/* 1. Status Rail: Live sessions first */}
+      <Container size="full" padding="none" py={8}>
         <RacesLiveRail 
           liveRaces={viewData.liveRaces} 
           onRaceClick={onRaceClick} 
         />
+      </Container>
 
-        {/* 2. Command Bar: Fast filters */}
+      {/* 2. Command Bar: Fast filters */}
+      <Container size="full" padding="none" py={4}>
         <RacesCommandBar 
           timeFilter={timeFilter}
           setTimeFilter={setTimeFilter}
@@ -72,47 +69,50 @@ export function RacesIndexTemplate({
           leagues={viewData.leagues}
           onShowMoreFilters={() => setShowFilterModal(true)}
         />
+      </Container>
 
-        {/* 3. Next Up: High signal panel */}
-        {timeFilter === 'upcoming' && viewData.nextUpRace && (
+      {/* 3. Next Up: High signal panel */}
+      {timeFilter === 'upcoming' && viewData.nextUpRace && (
+        <Container size="full" padding="none" py={8}>
           <NextUpRacePanel 
             race={viewData.nextUpRace} 
             onRaceClick={onRaceClick} 
           />
-        )}
+        </Container>
+      )}
 
-        {/* 4. Browse by Day: Grouped schedule */}
-        {hasRaces ? (
-          <Stack gap={8}>
-            {viewData.racesByDate.map((group) => (
+      {/* 4. Browse by Day: Grouped schedule */}
+      {hasRaces ? (
+        <Container size="full" padding="none" py={8}>
+          {viewData.racesByDate.map((group) => (
+            <Container key={group.dateKey} size="full" padding="none" py={4}>
               <RacesDayGroup 
-                key={group.dateKey}
                 dateLabel={group.dateLabel}
                 races={group.races}
                 onRaceClick={onRaceClick}
               />
-            ))}
-          </Stack>
-        ) : (
-          <RacesEmptyState />
-        )}
+            </Container>
+          ))}
+        </Container>
+      ) : (
+        <RacesEmptyState />
+      )}
 
-        <RaceFilterModal
-          isOpen={showFilterModal}
-          onClose={() => setShowFilterModal(false)}
-          statusFilter={statusFilter as any}
-          setStatusFilter={setStatusFilter}
-          leagueFilter={leagueFilter}
-          setLeagueFilter={setLeagueFilter}
-          timeFilter={timeFilter as any}
-          setTimeFilter={setTimeFilter}
-          searchQuery=""
-          setSearchQuery={() => {}}
-          leagues={viewData.leagues}
-          showSearch={true}
-          showTimeFilter={false}
-        />
-      </Stack>
-    </Container>
+      <RaceFilterModal
+        isOpen={showFilterModal}
+        onClose={() => setShowFilterModal(false)}
+        statusFilter={statusFilter as any}
+        setStatusFilter={setStatusFilter}
+        leagueFilter={leagueFilter}
+        setLeagueFilter={setLeagueFilter}
+        timeFilter={timeFilter as any}
+        setTimeFilter={setTimeFilter}
+        searchQuery=""
+        setSearchQuery={() => {}}
+        leagues={viewData.leagues}
+        showSearch={true}
+        showTimeFilter={false}
+      />
+    </Section>
   );
 }