website refactor

apps/website/templates/RacesIndexTemplate.tsx

@@ -9,7 +9,9 @@ import { NextUpRacePanel } from '@/components/races/NextUpRacePanel';
 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 { PageHeader } from '@/ui/PageHeader';
+import { Stack } from '@/ui/Stack';
+import { Flag } from 'lucide-react';
 import type { RacesViewData, RaceViewData } from '@/lib/view-data/RacesViewData';
 
 export interface RacesIndexTemplateProps {
@@ -45,22 +47,21 @@ export function RacesIndexTemplate({
   const hasRaces = viewData.racesByDate.length > 0;
 
   return (
-    <Section variant="default" padding="lg">
+    <Section variant="default" padding="md">
       <PageHeader 
         title="Races" 
-        subtitle="Live Sessions & Upcoming Events" 
+        description="Live Sessions & Upcoming Events" 
+        icon={Flag}
       />
 
-      {/* 1. Status Rail: Live sessions first */}
-      <Container size="full" padding="none" py={8}>
+      <Stack gap={12}>
+        {/* 1. Status Rail: Live sessions first */}
         <RacesLiveRail 
           liveRaces={viewData.liveRaces} 
           onRaceClick={onRaceClick} 
         />
-      </Container>
 
-      {/* 2. Command Bar: Fast filters */}
-      <Container size="full" padding="none" py={4}>
+        {/* 2. Command Bar: Fast filters */}
         <RacesCommandBar 
           timeFilter={timeFilter}
           setTimeFilter={setTimeFilter}
@@ -69,34 +70,31 @@ export function RacesIndexTemplate({
           leagues={viewData.leagues}
           onShowMoreFilters={() => setShowFilterModal(true)}
         />
-      </Container>
 
-      {/* 3. Next Up: High signal panel */}
-      {timeFilter === 'upcoming' && viewData.nextUpRace && (
-        <Container size="full" padding="none" py={8}>
+        {/* 3. Next Up: High signal panel */}
+        {timeFilter === 'upcoming' && viewData.nextUpRace && (
           <NextUpRacePanel 
             race={viewData.nextUpRace} 
             onRaceClick={onRaceClick} 
           />
-        </Container>
-      )}
+        )}
 
-      {/* 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}>
+        {/* 4. Browse by Day: Grouped schedule */}
+        {hasRaces ? (
+          <Stack gap={8}>
+            {viewData.racesByDate.map((group) => (
               <RacesDayGroup 
+                key={group.dateKey}
                 dateLabel={group.dateLabel}
                 races={group.races}
                 onRaceClick={onRaceClick}
               />
-            </Container>
-          ))}
-        </Container>
-      ) : (
-        <RacesEmptyState />
-      )}
+            ))}
+          </Stack>
+        ) : (
+          <RacesEmptyState />
+        )}
+      </Stack>
 
       <RaceFilterModal
         isOpen={showFilterModal}