website refactor

apps/website/components/feed/FeedLayout.tsx

@@ -8,6 +8,7 @@ import { Grid } from '@/ui/Grid';
 import { Stack } from '@/ui/Stack';
 import { Section } from '@/ui/Section';
 import { Text } from '@/ui/Text';
+import { DateDisplay } from '@/lib/display-objects/DateDisplay';
 
 interface FeedItemData {
   id: string;
@@ -46,6 +47,16 @@ export function FeedLayout({
   upcomingRaces,
   latestResults
 }: FeedLayoutProps) {
+  const formattedUpcomingRaces = upcomingRaces.map(r => ({
+    ...r,
+    formattedDate: DateDisplay.formatShort(r.scheduledAt),
+  }));
+
+  const formattedLatestResults = latestResults.map(r => ({
+    ...r,
+    formattedDate: DateDisplay.formatShort(r.scheduledAt),
+  }));
+
   return (
     <Section className="mt-16 mb-20">
       <Container>
@@ -64,8 +75,8 @@ export function FeedLayout({
             </Card>
           </Stack>
           <Stack as="aside" gap={6}>
-            <UpcomingRacesSidebar races={upcomingRaces} />
-            <LatestResultsSidebar results={latestResults} />
+            <UpcomingRacesSidebar races={formattedUpcomingRaces} />
+            <LatestResultsSidebar results={formattedLatestResults} />
           </Stack>
         </Grid>
       </Container>