website refactor

apps/website/ui/StatGridItem.tsx

@@ -1,36 +1,36 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { Box } from './primitives/Box';
-import { Stack } from './primitives/Stack';
 import { Text } from './Text';
-import { Icon } from './Icon';
-import { LucideIcon } from 'lucide-react';
+import { Stack } from './primitives/Stack';
 
-interface StatGridItemProps {
+export interface StatGridItemProps {
   label: string;
   value: string | number;
-  icon?: LucideIcon;
-  color?: string;
+  icon?: React.ReactNode;
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'high' | 'med' | 'low';
+  color?: string; // Alias for intent
 }
 
-/**
- * StatGridItem
- * 
- * A simple stat display for use in a grid.
- */
-export function StatGridItem({ label, value, icon, color = 'text-primary-blue' }: StatGridItemProps) {
+export const StatGridItem = ({ 
+  label, 
+  value, 
+  icon, 
+  intent = 'high',
+  color
+}: StatGridItemProps) => {
   return (
-    <Box p={4} textAlign="center">
+    <Box padding={4} textAlign="center">
       {icon && (
-        <Stack direction="row" align="center" justify="center" gap={2} mb={1} color={color}>
-          <Icon icon={icon} size={4} />
+        <Stack direction="row" align="center" justify="center" gap={2} marginBottom={1}>
+          {icon}
         </Stack>
       )}
-      <Text size="2xl" weight="bold" color="text-white" block>
+      <Text size="2xl" weight="bold" variant={intent} color={color} block>
         {value}
       </Text>
-      <Text size="xs" weight="medium" color="text-gray-500" uppercase letterSpacing="wider">
+      <Text size="xs" weight="medium" variant="low" uppercase letterSpacing="wider">
         {label}
       </Text>
     </Box>
   );
-}
+};