website refactor

apps/website/components/races/FinishDistributionChart.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+
+interface FinishDistributionProps {
+  wins: number;
+  podiums: number;
+  topTen: number;
+  total: number;
+}
+
+export 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 (
+    <Stack gap={3}>
+      <Box h="4" rounded="full" overflow="hidden" display="flex" bg="bg-charcoal-outline">
+        {segments.map((segment) => (
+          <Box
+            key={segment.label}
+            bg={segment.color}
+            transition
+            style={{ width: `${(segment.value / total) * 100}%` }}
+          />
+        ))}
+      </Box>
+      <Box display="flex" flexWrap="wrap" gap={4} justifyContent="center">
+        {segments.map((segment) => (
+          <Box key={segment.label} display="flex" alignItems="center" gap={2}>
+            <Box w="3" h="3" rounded="full" bg={segment.color} />
+            <Text size="xs" color={segment.textColor}>
+              {segment.label}: {segment.value} ({((segment.value / total) * 100).toFixed(0)}%)
+            </Text>
+          </Box>
+        ))}
+      </Box>
+    </Stack>
+  );
+}