website refactor

apps/website/components/home/StewardingPreview.tsx

@@ -13,11 +13,30 @@ import { Grid } from '@/ui/Grid';
 import { Box } from '@/ui/Box';
 import { Gavel, Clock, User, MessageSquare } from 'lucide-react';
 
+interface StewardingPreviewProps {
+  race?: {
+    id: string;
+    track: string;
+    car: string;
+    formattedDate: string;
+  };
+  team?: {
+    id: string;
+    name: string;
+    description: string;
+  };
+}
+
 /**
  * StewardingPreview - Refined for "Modern Precision" and "Dieter Rams" style.
  * Thorough down to the last detail.
  */
-export function StewardingPreview() {
+export function StewardingPreview({ race, team }: StewardingPreviewProps) {
+  const incidentId = race ? `${race.id.slice(0, 3).toUpperCase()}-WG` : '402-WG';
+  const trackName = race?.track || 'Watkins Glen - Cup';
+  const carName = race?.car || 'Porsche 911 GT3 R';
+  const teamName = team?.name || 'Alex Miller';
+
   return (
     <Section variant="muted" py={32}>
       <Box>
@@ -36,9 +55,9 @@ export function StewardingPreview() {
                 <Group gap={2}>
                   <Text variant="low" size="xs" uppercase weight="bold" letterSpacing="0.1em">Incident Report</Text>
                   <Text variant="low" size="xs">•</Text>
-                  <Text variant="low" size="xs" uppercase weight="bold" letterSpacing="0.1em">ID: 402-WG</Text>
+                  <Text variant="low" size="xs" uppercase weight="bold" letterSpacing="0.1em">ID: {incidentId}</Text>
                 </Group>
-                <Heading level={3} weight="bold">Turn 1 Contact: Miller vs Chen</Heading>
+                <Heading level={3} weight="bold">Turn 1 Contact: {teamName} vs David Chen</Heading>
               </Stack>
               <StatusBadge variant="warning">UNDER REVIEW</StatusBadge>
             </Group>
@@ -50,8 +69,8 @@ export function StewardingPreview() {
                     <User size={14} className="text-[var(--ui-color-intent-primary)]" />
                     <Text size="xs" uppercase weight="bold" variant="low">Protestor</Text>
                   </Group>
-                  <Text weight="bold">Alex Miller</Text>
-                  <Text size="sm" variant="low">#42 - Porsche 911 GT3 R</Text>
+                  <Text weight="bold">{teamName}</Text>
+                  <Text size="sm" variant="low">#42 - {carName}</Text>
                 </Stack>
               </Panel>
               <Panel variant="bordered" padding="md">
@@ -71,7 +90,7 @@ export function StewardingPreview() {
                     <Text size="xs" uppercase weight="bold" variant="low">Session Info</Text>
                   </Group>
                   <Text weight="bold">Lap 1, 00:42.150</Text>
-                  <Text size="sm" variant="low">Watkins Glen - Cup</Text>
+                  <Text size="sm" variant="low">{trackName}</Text>
                 </Stack>
               </Panel>
             </Grid>