website refactor

apps/website/components/admin/UserStatsSummary.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import { MetricCard } from '@/ui/MetricCard';
-import { Grid } from '@/ui/primitives/Grid';
+import { StatGrid } from '@/ui/StatGrid';
 import { Shield, Users } from 'lucide-react';
+import React from 'react';
 
 interface UserStatsSummaryProps {
   total: number;
@@ -11,25 +12,16 @@ interface UserStatsSummaryProps {
 }
 
 export function UserStatsSummary({ total, activeCount, adminCount }: UserStatsSummaryProps) {
+  const stats = [
+    { label: 'Total Users', value: total, icon: Users, intent: 'primary' as const },
+    { label: 'Active', value: activeCount, intent: 'success' as const },
+    { label: 'Admins', value: adminCount, icon: Shield, intent: 'telemetry' as const },
+  ];
+
   return (
-    <Grid cols={3} gap={4}>
-      <MetricCard 
-        label="Total Users" 
-        value={total} 
-        icon={Users} 
-        color="text-blue-400"
-      />
-      <MetricCard 
-        label="Active" 
-        value={activeCount} 
-        color="text-performance-green"
-      />
-      <MetricCard 
-        label="Admins" 
-        value={adminCount} 
-        icon={Shield} 
-        color="text-purple-400"
-      />
-    </Grid>
+    <StatGrid 
+      stats={stats}
+      columns={3}
+    />
   );
 }