website refactor

apps/website/components/profile/ProfileStatGrid.tsx

@@ -1,11 +1,11 @@
-import { Box } from '../../ui/primitives/Box';
-import { Grid } from '../../ui/primitives/Grid';
-import { Text } from '../../ui/Text';
+import { StatGrid } from '../../ui/StatGrid';
+import { Bug } from 'lucide-react';
+import React from 'react';
 
 interface Stat {
   label: string;
   value: string | number;
-  color?: string;
+  intent?: 'primary' | 'telemetry' | 'success' | 'critical';
 }
 
 interface ProfileStatGridProps {
@@ -13,22 +13,18 @@ interface ProfileStatGridProps {
 }
 
 export function ProfileStatGrid({ stats }: ProfileStatGridProps) {
+  const mappedStats = stats.map(stat => ({
+    label: stat.label,
+    value: stat.value,
+    intent: stat.intent || 'primary',
+    icon: Bug // Default icon if none provided, but StatBox requires one
+  }));
+
   return (
-    <Grid cols={2} mdCols={4} gap={4}>
-      {stats.map((stat, idx) => (
-        <Box 
-          key={idx} 
-          p={4} 
-          bg="bg-[#0f1115]" 
-          rounded="xl" 
-          border 
-          borderColor="border-[#262626]" 
-          textAlign="center"
-        >
-          <Text size="3xl" weight="bold" color={stat.color} block mb={1}>{stat.value}</Text>
-          <Text size="xs" color="text-gray-500" uppercase letterSpacing="0.05em">{stat.label}</Text>
-        </Box>
-      ))}
-    </Grid>
+    <StatGrid 
+      stats={mappedStats}
+      columns={{ base: 2, md: 4 }}
+      variant="box"
+    />
   );
 }