website refactor

apps/website/components/dashboard/DashboardKpiRow.tsx

@@ -1,18 +1,15 @@
-import { Grid } from '@/ui/Grid';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Card } from '@/ui/Card';
-
+import { StatGrid } from '@/ui/StatGrid';
+ 
 interface KpiItem {
   label: string;
   value: string | number;
   intent?: 'primary' | 'success' | 'warning' | 'critical' | 'high' | 'med' | 'low';
 }
-
+ 
 interface DashboardKpiRowProps {
   items: KpiItem[];
 }
-
+ 
 /**
  * DashboardKpiRow
  * 
@@ -20,29 +17,16 @@ interface DashboardKpiRowProps {
  */
 export function DashboardKpiRow({ items }: DashboardKpiRowProps) {
   return (
-    <Grid cols={{ base: 2, md: 3, lg: 6 }} gap={4}>
-      {items.map((item, index) => (
-        <Card key={index} variant="dark">
-          <Stack gap={1}>
-            <Text 
-              size="xs" 
-              weight="bold" 
-              uppercase 
-              variant="low"
-            >
-              {item.label}
-            </Text>
-            <Text 
-              size="xl" 
-              font="mono" 
-              weight="bold"
-              variant={item.intent || 'high'}
-            >
-              {item.value}
-            </Text>
-          </Stack>
-        </Card>
-      ))}
-    </Grid>
+    <StatGrid
+      variant="card"
+      cardVariant="dark"
+      font="mono"
+      columns={{ base: 2, md: 3, lg: 6 }}
+      stats={items.map(item => ({
+        label: item.label,
+        value: item.value,
+        intent: item.intent as any
+      }))}
+    />
   );
 }