website refactor

apps/website/components/races/RaceStewardingStats.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { CheckCircle, Clock, Gavel } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { StatGridItem } from '@/ui/StatGridItem';
+
+interface RaceStewardingStatsProps {
+  pendingCount: number;
+  resolvedCount: number;
+  penaltiesCount: number;
+}
+
+export function RaceStewardingStats({ pendingCount, resolvedCount, penaltiesCount }: RaceStewardingStatsProps) {
+  return (
+    <Box display="grid" gridCols={3} gap={4}>
+      <StatGridItem
+        label="Pending"
+        value={pendingCount}
+        icon={Clock}
+        color="text-warning-amber"
+      />
+      <StatGridItem
+        label="Resolved"
+        value={resolvedCount}
+        icon={CheckCircle}
+        color="text-performance-green"
+      />
+      <StatGridItem
+        label="Penalties"
+        value={penaltiesCount}
+        icon={Gavel}
+        color="text-red-400"
+      />
+    </Box>
+  );
+}