website refactor

apps/website/ui/StatGridItem.tsx

@@ -1,12 +1,14 @@
+import { LucideIcon } from 'lucide-react';
 import React from 'react';
 import { Box } from './Box';
+import { Icon } from './Icon';
 import { Text } from './Text';
 import { Stack } from './Stack';
 
 export interface StatGridItemProps {
   label: string;
   value: string | number;
-  icon?: React.ReactNode;
+  icon?: React.ReactNode | LucideIcon;
   intent?: 'primary' | 'success' | 'warning' | 'critical' | 'high' | 'med' | 'low';
   color?: string; // Alias for intent
 }
@@ -18,11 +20,17 @@ export const StatGridItem = ({
   intent = 'high',
   color
 }: StatGridItemProps) => {
+  const isLucideIcon = typeof icon === 'function' || (typeof icon === 'object' && icon !== null && 'render' in icon);
+
   return (
     <Box padding={4} textAlign="center">
       {icon && (
         <Stack direction="row" align="center" justify="center" gap={2} marginBottom={1}>
-          {icon}
+          {isLucideIcon ? (
+            <Icon icon={icon as LucideIcon} size={4} intent={intent} />
+          ) : (
+            icon
+          )}
         </Stack>
       )}
       <Text size="2xl" weight="bold" variant={intent} color={color} block>