website refactor

apps/website/components/drivers/CareerStats.tsx

@@ -0,0 +1,36 @@
+
+
+import { Box } from '@/ui/Box';
+import { Card } from '@/ui/Card';
+import { Grid } from '@/ui/Grid';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { StatGridItem } from '@/ui/StatGridItem';
+import { TrendingUp } from 'lucide-react';
+
+interface CareerStatsProps {
+  stats: {
+    totalRaces: number;
+    wins: number;
+    podiums: number;
+    consistency: number | null;
+  };
+}
+
+export function CareerStats({ stats }: CareerStatsProps) {
+  return (
+    <Card>
+      <Box mb={4}>
+        <Heading level={2} icon={<Icon icon={TrendingUp} size={5} color="#10b981" />}>
+          Career Statistics
+        </Heading>
+      </Box>
+      <Grid cols={2} gap={4}>
+        <StatGridItem label="Races" value={stats.totalRaces} />
+        <StatGridItem label="Wins" value={stats.wins} color="text-performance-green" />
+        <StatGridItem label="Podiums" value={stats.podiums} color="text-warning-amber" />
+        <StatGridItem label="Consistency" value={`${stats.consistency}%`} color="text-primary-blue" />
+      </Grid>
+    </Card>
+  );
+}