website refactor

apps/website/ui/StatCard.tsx

@@ -10,39 +10,55 @@ export interface StatCardProps {
   value: string | number;
   icon?: LucideIcon;
   intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry' | 'low' | 'high' | 'med';
-  variant?: 'default' | 'dark' | 'muted' | 'glass' | 'outline';
+  variant?: 'default' | 'dark' | 'muted' | 'glass' | 'outline' | 'blue' | 'green' | 'orange';
   font?: 'sans' | 'mono';
   trend?: {
     value: number;
     isPositive: boolean;
   };
   footer?: ReactNode;
+  suffix?: string;
+  prefix?: string;
+  delay?: number;
 }
 
 export const StatCard = ({ 
   label, 
   value, 
   icon, 
-  intent = 'primary',
+  intent: intentProp,
   variant = 'default',
   font = 'sans',
   trend,
-  footer 
+  footer,
+  suffix,
+  prefix,
+  delay
 }: StatCardProps) => {
+  const variantMap: Record<string, { variant: any, intent: any }> = {
+    blue: { variant: 'default', intent: 'primary' },
+    green: { variant: 'default', intent: 'success' },
+    orange: { variant: 'default', intent: 'warning' },
+  };
+
+  const mapped = variantMap[variant as string] || { variant, intent: intentProp || 'primary' };
+  const finalVariant = mapped.variant;
+  const finalIntent = mapped.intent;
+
   return (
-    <Card variant={variant}>
+    <Card variant={finalVariant}>
       <Box display="flex" alignItems="start" justifyContent="between" marginBottom={4}>
         <Box>
           <Text size="xs" weight="bold" variant="low" uppercase>
             {label}
           </Text>
-          <Text size="2xl" weight="bold" variant={intent as any || 'high'} font={font} block marginTop={1}>
-            {value}
+          <Text size="2xl" weight="bold" variant={finalIntent as any || 'high'} font={font} block marginTop={1}>
+            {prefix}{value}{suffix}
           </Text>
         </Box>
         {icon && (
           <Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
-            <Icon icon={icon} size={5} intent={intent} />
+            <Icon icon={icon} size={5} intent={finalIntent} />
           </Box>
         )}
       </Box>