website refactor

apps/website/components/drivers/PerformanceMetrics.tsx

@@ -0,0 +1,86 @@
+
+
+import { Box } from '@/ui/Box';
+import { Card } from '@/ui/Card';
+import { Text } from '@/ui/Text';
+
+interface PerformanceMetricsProps {
+  stats: {
+    winRate: number;
+    podiumRate: number;
+    dnfRate: number;
+    avgFinish: number;
+    consistency: number;
+    bestFinish: number;
+    worstFinish: number;
+  };
+}
+
+export function PerformanceMetrics({ stats }: PerformanceMetricsProps) {
+  const getPerformanceVariant = (value: number, type: 'rate' | 'finish' | 'consistency'): 'blue' | 'green' | 'orange' | 'purple' => {
+    if (type === 'rate') {
+      if (value >= 30) return 'green';
+      if (value >= 15) return 'orange';
+      return 'blue';
+    }
+    if (type === 'consistency') {
+      if (value >= 80) return 'green';
+      if (value >= 60) return 'orange';
+      return 'blue';
+    }
+    return 'blue';
+  };
+
+  const metrics = [
+    {
+      label: 'Win Rate',
+      value: `${stats.winRate.toFixed(1)}%`,
+      variant: getPerformanceVariant(stats.winRate, 'rate'),
+      icon: '🏆'
+    },
+    {
+      label: 'Podium Rate',
+      value: `${stats.podiumRate.toFixed(1)}%`,
+      variant: getPerformanceVariant(stats.podiumRate, 'rate'),
+      icon: '🥇'
+    },
+    {
+      label: 'DNF Rate',
+      value: `${stats.dnfRate.toFixed(1)}%`,
+      variant: stats.dnfRate < 10 ? 'green' : 'orange',
+      icon: '❌'
+    },
+    {
+      label: 'Avg Finish',
+      value: stats.avgFinish.toFixed(1),
+      variant: 'blue' as const,
+      icon: '📊'
+    },
+    {
+      label: 'Consistency',
+      value: `${stats.consistency.toFixed(0)}%`,
+      variant: getPerformanceVariant(stats.consistency, 'consistency'),
+      icon: '🎯'
+    },
+    {
+      label: 'Best / Worst',
+      value: `${stats.bestFinish} / ${stats.worstFinish}`,
+      variant: 'blue' as const,
+      icon: '📈'
+    }
+  ];
+
+  return (
+    <Box display="grid" responsiveGridCols={{ base: 2, md: 3 }} gap={4}>
+      {metrics.map((metric, index) => (
+        <Card key={index}>
+          <Box p={4} textAlign="center">
+            <Text size="2xl" block mb={2}>{metric.icon}</Text>
+            <Text size="sm" color="text-gray-400" block mb={1}>{metric.label}</Text>
+            <Text size="xl" weight="bold" color="text-white" block>{metric.value}</Text>
+          </Box>
+        </Card>
+      ))}
+    </Box>
+  );
+}