website refactor

apps/website/ui/StatCard.tsx

@@ -1,115 +1,115 @@
-
-
-import { motion, useReducedMotion } from 'framer-motion';
-import { ArrowDownRight, ArrowUpRight, LucideIcon } from 'lucide-react';
+import React, { ReactNode } from 'react';
 import { Box } from './primitives/Box';
-import { Card } from './Card';
-import { Icon } from './Icon';
 import { Stack } from './primitives/Stack';
 import { Text } from './Text';
+import { Card } from './Card';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
 
 interface StatCardProps {
   label: string;
   value: string | number;
-  subValue?: string;
   icon?: LucideIcon;
-  variant?: 'blue' | 'purple' | 'green' | 'orange';
-  className?: string;
   trend?: {
     value: number;
     isPositive: boolean;
   };
+  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+  className?: string;
+  onClick?: () => void;
   prefix?: string;
   suffix?: string;
   delay?: number;
 }
 
-export function StatCard({ 
-  label, 
-  value, 
-  subValue,
+export function StatCard({
+  label,
+  value,
   icon,
-  variant = 'blue',
-  className = '',
   trend,
-  prefix = '',
-  suffix = '',
-  delay = 0,
+  variant = 'default',
+  className = '',
+  onClick,
+  prefix,
+  suffix,
+  delay,
 }: StatCardProps) {
-  const shouldReduceMotion = useReducedMotion();
-  
   const variantClasses = {
-    blue: 'bg-gradient-to-br from-blue-900/20 to-blue-700/10 border-blue-500/30',
-    purple: 'bg-gradient-to-br from-purple-900/20 to-purple-700/10 border-purple-500/30',
-    green: 'bg-gradient-to-br from-green-900/20 to-green-700/10 border-green-500/30',
-    orange: 'bg-gradient-to-br from-orange-900/20 to-orange-700/10 border-orange-500/30'
+    default: 'bg-panel-gray border-border-gray',
+    primary: 'bg-primary-accent/5 border-primary-accent/20',
+    success: 'bg-success-green/5 border-success-green/20',
+    warning: 'bg-warning-amber/5 border-warning-amber/20',
+    danger: 'bg-critical-red/5 border-critical-red/20',
+    info: 'bg-telemetry-aqua/5 border-telemetry-aqua/20',
   };
-  
+
+  const iconBgClasses = {
+    default: 'bg-white/5',
+    primary: 'bg-primary-accent/10',
+    success: 'bg-success-green/10',
+    warning: 'bg-warning-amber/10',
+    danger: 'bg-critical-red/10',
+    info: 'bg-telemetry-aqua/10',
+  };
+
   const iconColorClasses = {
-    blue: 'text-primary-blue',
-    purple: 'text-purple-400',
-    green: 'text-performance-green',
-    orange: 'text-warning-amber'
+    default: 'text-gray-400',
+    primary: 'text-primary-accent',
+    success: 'text-success-green',
+    warning: 'text-warning-amber',
+    danger: 'text-critical-red',
+    info: 'text-telemetry-aqua',
   };
-  
+
   const cardContent = (
-    <Card className={`${variantClasses[variant]} ${className} h-full`} p={5}>
+    <Card variant="default" p={5} className={`${variantClasses[variant]} ${className} h-full`}>
       <Stack gap={3}>
-        <Stack direction="row" align="start" justify="between">
+        <Stack direction="row" align="center" justify="between">
+          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">
+            {label}
+          </Text>
           {icon && (
             <Box 
-              width="11" 
-              height="11" 
-              rounded="xl" 
-              display="flex" 
-              center 
-              bg="bg-iron-gray/50" 
-              border={true} 
-              borderColor="border-charcoal-outline"
+              p={2} 
+              rounded="lg" 
+              bg={iconBgClasses[variant]}
+              className={iconColorClasses[variant]}
             >
-              <Icon icon={icon} size={5} className={iconColorClasses[variant]} />
+              <Icon icon={icon} size={5} />
             </Box>
           )}
+        </Stack>
+
+        <Stack gap={1}>
+          <Text size="3xl" weight="bold" color="text-white">
+            {prefix}{value}{suffix}
+          </Text>
           {trend && (
-            <Stack 
-              direction="row" 
-              align="center" 
-              gap={1} 
-              color={trend.isPositive ? 'text-performance-green' : 'text-error-red'}
-            >
-              <Icon icon={trend.isPositive ? ArrowUpRight : ArrowDownRight} size={4} />
-              <Text size="sm" weight="medium">{Math.abs(trend.value)}%</Text>
+            <Stack direction="row" align="center" gap={1}>
+              <Text 
+                size="xs" 
+                weight="bold" 
+                color={trend.isPositive ? 'text-success-green' : 'text-critical-red'}
+              >
+                {trend.isPositive ? '+' : ''}{trend.value}%
+              </Text>
+              <Text size="xs" color="text-gray-500">
+                vs last period
+              </Text>
             </Stack>
           )}
         </Stack>
-        <Box>
-          <Text size="2xl" weight="bold" color="text-white" block mb={1}>
-            {prefix}{typeof value === 'number' ? value.toLocaleString() : value}{suffix}
-          </Text>
-          <Text size="sm" color="text-gray-400" block>{label}</Text>
-          {subValue && (
-            <Text size="xs" color="text-gray-500" block mt={1}>
-              {subValue}
-            </Text>
-          )}
-        </Box>
       </Stack>
     </Card>
   );
 
-  if (shouldReduceMotion) {
-    return <Box fullHeight>{cardContent}</Box>;
+  if (onClick) {
+    return (
+      <Box as="button" onClick={onClick} w="full" textAlign="left" className="focus:outline-none">
+        {cardContent}
+      </Box>
+    );
   }
 
-  return (
-    <Box
-      as={motion.div}
-      fullHeight
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ delay }}
-    >
-      {cardContent}
-    </Box>
-  );
+  return cardContent;
 }