wip

apps/website/components/races/FinishDistributionChart.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+interface FinishDistributionProps {
+  wins: number;
+  podiums: number;
+  topTen: number;
+  total: number;
+}
+
+export default function FinishDistributionChart({ wins, podiums, topTen, total }: FinishDistributionProps) {
+  const outsideTopTen = total - topTen;
+  const podiumsNotWins = podiums - wins;
+  const topTenNotPodium = topTen - podiums;
+
+  const segments = [
+    { label: 'Wins', value: wins, color: 'bg-performance-green', textColor: 'text-performance-green' },
+    { label: 'Podiums', value: podiumsNotWins, color: 'bg-warning-amber', textColor: 'text-warning-amber' },
+    { label: 'Top 10', value: topTenNotPodium, color: 'bg-primary-blue', textColor: 'text-primary-blue' },
+    { label: 'Other', value: outsideTopTen, color: 'bg-gray-600', textColor: 'text-gray-400' },
+  ].filter(s => s.value > 0);
+
+  return (
+    <div className="space-y-3">
+      <div className="h-4 rounded-full overflow-hidden flex bg-charcoal-outline">
+        {segments.map((segment, index) => (
+          <div
+            key={segment.label}
+            className={`${segment.color} transition-all duration-500`}
+            style={{ width: `${(segment.value / total) * 100}%` }}
+          />
+        ))}
+      </div>
+      <div className="flex flex-wrap gap-4 justify-center">
+        {segments.map((segment) => (
+          <div key={segment.label} className="flex items-center gap-2">
+            <div className={`w-3 h-3 rounded-full ${segment.color}`} />
+            <span className={`text-xs ${segment.textColor}`}>
+              {segment.label}: {segment.value} ({((segment.value / total) * 100).toFixed(0)}%)
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/website/components/races/TrackImage.tsx

@@ -0,0 +1,30 @@
+/**
+ * TrackImage
+ *
+ * Pure UI component for displaying track images.
+ * Renders an optimized image with fallback on error.
+ */
+
+import Image from 'next/image';
+
+export interface TrackImageProps {
+  trackId: string;
+  alt: string;
+  className?: string;
+}
+
+export function TrackImage({ trackId, alt, className = '' }: TrackImageProps) {
+  return (
+    <Image
+      src={`/media/tracks/${trackId}/image`}
+      alt={alt}
+      width={800}
+      height={256}
+      className={`w-full h-64 object-cover ${className}`}
+      onError={(e) => {
+        // Fallback to default track image
+        (e.target as HTMLImageElement).src = '/default-track-image.png';
+      }}
+    />
+  );
+}

apps/website/components/races/UpcomingRacesSidebar.tsx

@@ -1,5 +1,9 @@
-import Card from '@/ui/Card';
-import Button from '@/ui/Button';
+import { Card } from '@/ui/Card';
+import { Button } from '@/ui/Button';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
 
 type UpcomingRace = {
   id: string;
@@ -12,44 +16,46 @@ interface UpcomingRacesSidebarProps {
   races: UpcomingRace[];
 }
 
-export default function UpcomingRacesSidebar({ races }: UpcomingRacesSidebarProps) {
+export function UpcomingRacesSidebar({ races }: UpcomingRacesSidebarProps) {
   if (!races.length) {
     return null;
   }
 
   return (
     <Card className="bg-iron-gray/80">
-      <div className="flex items-baseline justify-between mb-3">
-        <h3 className="text-sm font-semibold text-white">Upcoming races</h3>
+      <Stack direction="row" align="baseline" justify="between" mb={3}>
+        <Heading level={3}>Upcoming races</Heading>
         <Button
           as="a"
           href="/races"
           variant="secondary"
-          className="text-[11px] px-3 py-1.5"
+          size="sm"
         >
           View all
         </Button>
-      </div>
-      <ul className="space-y-3">
+      </Stack>
+      <Stack gap={3}>
         {races.slice(0, 4).map((race) => {
           const scheduledAt = typeof race.scheduledAt === 'string' ? new Date(race.scheduledAt) : race.scheduledAt;
 
           return (
-          <li key={race.id} className="flex items-start justify-between gap-3 text-xs">
-            <div className="flex-1 min-w-0">
-              <p className="text-white truncate">{race.track}</p>
-              <p className="text-gray-400 truncate">{race.car}</p>
-            </div>
-            <div className="text-right text-gray-500 whitespace-nowrap">
-              {scheduledAt.toLocaleDateString(undefined, {
-                month: 'short',
-                day: 'numeric'
-              })}
-            </div>
-          </li>
+            <Box key={race.id} display="flex" justify="between" gap={3}>
+              <Box flex={1} className="min-w-0">
+                <Text size="xs" color="text-white" block className="truncate">{race.track}</Text>
+                <Text size="xs" color="text-gray-400" block className="truncate">{race.car}</Text>
+              </Box>
+              <Box textAlign="right">
+                <Text size="xs" color="text-gray-500" className="whitespace-nowrap">
+                  {scheduledAt.toLocaleDateString(undefined, {
+                    month: 'short',
+                    day: 'numeric'
+                  })}
+                </Text>
+              </Box>
+            </Box>
           );
         })}
-      </ul>
+      </Stack>
     </Card>
   );
 }