extract components from website

apps/website/components/leagues/LeagueChampionshipStats.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import Card from '@/components/ui/Card';
+import { StandingEntryViewModel } from '@/lib/view-models/StandingEntryViewModel';
+import { DriverViewModel } from '@/lib/view-models';
+
+interface LeagueChampionshipStatsProps {
+  standings: StandingEntryViewModel[];
+  drivers: DriverViewModel[];
+}
+
+export default function LeagueChampionshipStats({ standings, drivers }: LeagueChampionshipStatsProps) {
+  if (standings.length === 0) return null;
+
+  const leader = standings[0];
+  const totalRaces = Math.max(...standings.map(s => s.races), 0);
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <Card>
+        <div className="flex items-center gap-3">
+          <div className="w-12 h-12 rounded-full bg-yellow-500/10 flex items-center justify-center">
+            <span className="text-2xl">🏆</span>
+          </div>
+          <div>
+            <p className="text-xs text-gray-400 mb-1">Championship Leader</p>
+            <p className="font-bold text-white">{drivers.find(d => d.id === leader?.driverId)?.name || 'N/A'}</p>
+            <p className="text-sm text-yellow-400 font-medium">{leader?.points || 0} points</p>
+          </div>
+        </div>
+      </Card>
+
+      <Card>
+        <div className="flex items-center gap-3">
+          <div className="w-12 h-12 rounded-full bg-primary-blue/10 flex items-center justify-center">
+            <span className="text-2xl">🏁</span>
+          </div>
+          <div>
+            <p className="text-xs text-gray-400 mb-1">Races Completed</p>
+            <p className="text-2xl font-bold text-white">{totalRaces}</p>
+            <p className="text-sm text-gray-400">Season in progress</p>
+          </div>
+        </div>
+      </Card>
+
+      <Card>
+        <div className="flex items-center gap-3">
+          <div className="w-12 h-12 rounded-full bg-performance-green/10 flex items-center justify-center">
+            <span className="text-2xl">👥</span>
+          </div>
+          <div>
+            <p className="text-xs text-gray-400 mb-1">Active Drivers</p>
+            <p className="text-2xl font-bold text-white">{standings.length}</p>
+            <p className="text-sm text-gray-400">Competing for points</p>
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}