website refactor

apps/website/components/drivers/DriverStatsPanel.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import React from 'react';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+interface StatItem {
+  label: string;
+  value: string | number;
+  subValue?: string;
+  color?: string;
+}
+
+interface DriverStatsPanelProps {
+  stats: StatItem[];
+}
+
+export function DriverStatsPanel({ stats }: DriverStatsPanelProps) {
+  return (
+    <Box display="grid" gridCols={{ base: 2, sm: 3, lg: 6 }} gap="px" overflow="hidden" rounded="xl" border borderColor="border-charcoal-outline" bg="bg-charcoal-outline">
+      {stats.map((stat, index) => (
+        <Box key={index} display="flex" flexDirection="col" gap={1} bg="bg-deep-charcoal" p={5} transition hoverBg="bg-deep-charcoal/80">
+          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
+            {stat.label}
+          </Text>
+          <Box display="flex" alignItems="baseline" gap={1.5}>
+            <Text 
+              size="2xl" 
+              weight="bold" 
+              font="mono" 
+              color={stat.color || 'text-white'}
+            >
+              {stat.value}
+            </Text>
+            {stat.subValue && (
+              <Text size="xs" weight="bold" color="text-gray-600" font="mono">
+                {stat.subValue}
+              </Text>
+            )}
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  );
+}