website refactor

apps/website/components/races/LatestResultsSidebar.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Heading } from '@/ui/Heading';
+import { RaceResultList } from '@/ui/RaceResultList';
+import { RaceSummaryItem } from '@/ui/RaceSummaryItem';
+import { Box } from '@/ui/Box';
+
+type RaceWithResults = {
+  raceId: string;
+  track: string;
+  car: string;
+  winnerName: string;
+  scheduledAt: string | Date;
+};
+
+interface LatestResultsSidebarProps {
+  results: RaceWithResults[];
+}
+
+export function LatestResultsSidebar({ results }: LatestResultsSidebarProps) {
+  if (!results.length) {
+    return null;
+  }
+
+  return (
+    <Card bg="bg-iron-gray/80" p={4}>
+      <Heading level={3} mb={3}>
+        Latest results
+      </Heading>
+      <RaceResultList>
+        {results.slice(0, 4).map((result) => {
+          const scheduledAt = typeof result.scheduledAt === 'string' ? new Date(result.scheduledAt) : result.scheduledAt;
+
+          return (
+            <Box as="li" key={result.raceId}>
+              <RaceSummaryItem
+                track={result.track}
+                meta={`${result.winnerName} • ${result.car}`}
+                date={scheduledAt}
+              />
+            </Box>
+          );
+        })}
+      </RaceResultList>
+    </Card>
+  );
+}