website refactor

apps/website/ui/MetricCard.tsx

@@ -1,64 +1,60 @@
 import React from 'react';
-import { LucideIcon } from 'lucide-react';
+import { Card } from './Card';
 import { Box } from './primitives/Box';
 import { Text } from './Text';
 import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
 
-interface MetricCardProps {
+export interface MetricCardProps {
   label: string;
   value: string | number;
   icon?: LucideIcon;
-  color?: string;
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
   trend?: {
     value: number;
     isPositive: boolean;
   };
-  border?: boolean;
-  bg?: string;
 }
 
-/**
- * A semantic component for displaying metrics.
- * Instrument-grade typography and dense-but-readable hierarchy.
- */
-export function MetricCard({
-  label,
-  value,
-  icon,
-  color = 'text-primary-accent',
-  trend,
-  border = true,
-  bg = 'panel-gray/40',
-}: MetricCardProps) {
+export const MetricCard = ({ 
+  label, 
+  value, 
+  icon, 
+  intent = 'primary',
+  trend 
+}: MetricCardProps) => {
   return (
-    <Box
-      bg={bg}
-      rounded="none"
-      p={4}
-      border={border}
-      borderColor="border-gray/30"
-      display="flex"
-      flexDirection="col"
-      gap={2}
-      hoverBg="panel-gray/60"
-      transition
-    >
-      <Box display="flex" alignItems="center" justifyContent="between">
-        <Box display="flex" alignItems="center" gap={2}>
-          {icon && <Icon icon={icon} size={4} className={color} />}
-          <Text size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="widest">
+    <Card variant="default">
+      <Box display="flex" alignItems="start" justifyContent="between" marginBottom={4}>
+        <Box>
+          <Text size="xs" weight="bold" variant="low" uppercase>
             {label}
           </Text>
-        </Box>
-        {trend && (
-          <Text size="xs" color={trend.isPositive ? 'text-success-green' : 'text-red-400'} font="mono">
-            {trend.isPositive ? '▲' : '▼'} {trend.value}%
+          <Text size="2xl" weight="bold" variant="high" block marginTop={1}>
+            {value}
           </Text>
+        </Box>
+        {icon && (
+          <Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
+            <Icon icon={icon} size={5} intent={intent} />
+          </Box>
         )}
       </Box>
-      <Text size="2xl" weight="bold" color="text-white" font="mono">
-        {typeof value === 'number' ? value.toLocaleString() : value}
-      </Text>
-    </Box>
+      
+      {trend && (
+        <Box display="flex" alignItems="center" gap={1}>
+          <Text 
+            size="xs" 
+            weight="bold" 
+            variant={trend.isPositive ? 'success' : 'critical'}
+          >
+            {trend.isPositive ? '+' : '-'}{Math.abs(trend.value)}%
+          </Text>
+          <Text size="xs" variant="low">
+            vs last period
+          </Text>
+        </Box>
+      )}
+    </Card>
   );
-}
+};