wip

apps/website/components/drivers/PerformanceMetrics.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import Card from '../ui/Card';
+
+interface PerformanceMetricsProps {
+  stats: {
+    winRate: number;
+    podiumRate: number;
+    dnfRate: number;
+    avgFinish: number;
+    consistency: number;
+    bestFinish: number;
+    worstFinish: number;
+  };
+}
+
+export default function PerformanceMetrics({ stats }: PerformanceMetricsProps) {
+  const getPerformanceColor = (value: number, type: 'rate' | 'finish' | 'consistency') => {
+    if (type === 'rate') {
+      if (value >= 30) return 'text-green-400';
+      if (value >= 15) return 'text-warning-amber';
+      return 'text-gray-300';
+    }
+    if (type === 'consistency') {
+      if (value >= 80) return 'text-green-400';
+      if (value >= 60) return 'text-warning-amber';
+      return 'text-gray-300';
+    }
+    return 'text-white';
+  };
+
+  const metrics = [
+    {
+      label: 'Win Rate',
+      value: `${stats.winRate.toFixed(1)}%`,
+      color: getPerformanceColor(stats.winRate, 'rate'),
+      icon: '🏆'
+    },
+    {
+      label: 'Podium Rate',
+      value: `${stats.podiumRate.toFixed(1)}%`,
+      color: getPerformanceColor(stats.podiumRate, 'rate'),
+      icon: '🥇'
+    },
+    {
+      label: 'DNF Rate',
+      value: `${stats.dnfRate.toFixed(1)}%`,
+      color: stats.dnfRate < 10 ? 'text-green-400' : 'text-danger-red',
+      icon: '❌'
+    },
+    {
+      label: 'Avg Finish',
+      value: stats.avgFinish.toFixed(1),
+      color: 'text-white',
+      icon: '📊'
+    },
+    {
+      label: 'Consistency',
+      value: `${stats.consistency.toFixed(0)}%`,
+      color: getPerformanceColor(stats.consistency, 'consistency'),
+      icon: '🎯'
+    },
+    {
+      label: 'Best / Worst',
+      value: `${stats.bestFinish} / ${stats.worstFinish}`,
+      color: 'text-gray-300',
+      icon: '📈'
+    }
+  ];
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+      {metrics.map((metric, index) => (
+        <Card key={index} className="text-center">
+          <div className="text-2xl mb-2">{metric.icon}</div>
+          <div className="text-sm text-gray-400 mb-1">{metric.label}</div>
+          <div className={`text-xl font-bold ${metric.color}`}>{metric.value}</div>
+        </Card>
+      ))}
+    </div>
+  );
+}