website refactor

apps/website/components/races/RaceStats.tsx

@@ -1,6 +1,6 @@
-import { Box } from '@/ui/primitives/Box';
-import { StatGridItem } from '@/ui/StatGridItem';
+import { StatGrid } from '@/ui/StatGrid';
 import { CalendarDays, Clock, Trophy, Zap } from 'lucide-react';
+import React from 'react';
 
 interface RaceStatsProps {
   stats: {
@@ -12,32 +12,20 @@ interface RaceStatsProps {
 }
 
 export function RaceStats({ stats }: RaceStatsProps) {
+  const mappedStats = [
+    { label: 'Total', value: stats.total, icon: CalendarDays, intent: 'low' as const },
+    { label: 'Scheduled', value: stats.scheduled, icon: Clock, intent: 'primary' as const },
+    { label: 'Live Now', value: stats.running, icon: Zap, intent: 'success' as const },
+    { label: 'Completed', value: stats.completed, icon: Trophy, intent: 'low' as const },
+  ];
+
   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"
+    <div style={{ marginTop: '1.5rem' }}>
+      <StatGrid
+        stats={mappedStats}
+        columns={{ base: 2, md: 4 }}
+        variant="box"
       />
-      <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>
+    </div>
   );
 }