website refactor

apps/website/components/races/RaceStats.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { CalendarDays, Clock, Zap, Trophy } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { StatGridItem } from '@/ui/StatGridItem';
+
+interface RaceStatsProps {
+  stats: {
+    total: number;
+    scheduled: number;
+    running: number;
+    completed: number;
+  };
+}
+
+export function RaceStats({ stats }: RaceStatsProps) {
+  return (
+    <Box display="grid" gridCols={{ base: 2, md: 4 }} gap={4} mt={6}>
+      <StatGridItem
+        label="Total"
+        value={stats.total}
+        icon={CalendarDays}
+        color="text-gray-400"
+      />
+      <StatGridItem
+        label="Scheduled"
+        value={stats.scheduled}
+        icon={Clock}
+        color="text-primary-blue"
+      />
+      <StatGridItem
+        label="Live Now"
+        value={stats.running}
+        icon={Zap}
+        color="text-performance-green"
+      />
+      <StatGridItem
+        label="Completed"
+        value={stats.completed}
+        icon={Trophy}
+        color="text-gray-400"
+      />
+    </Box>
+  );
+}