website refactor

apps/website/ui/CategoryDistributionCard.tsx

@@ -3,47 +3,57 @@ import { Box } from './primitives/Box';
 import { Text } from './Text';
 import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { Surface } from './primitives/Surface';
 
-interface CategoryDistributionCardProps {
+export interface CategoryDistributionCardProps {
   label: string;
   count: number;
-  percentage: number;
+  total: number;
   icon: LucideIcon;
-  color: string;
-  bgColor: string;
-  borderColor: string;
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
 }
 
-export function CategoryDistributionCard({
-  label,
-  count,
-  percentage,
-  icon,
-  color,
-  bgColor,
-  borderColor,
-}: CategoryDistributionCardProps) {
+export const CategoryDistributionCard = ({ 
+  label, 
+  count, 
+  total, 
+  icon, 
+  intent = 'primary' 
+}: CategoryDistributionCardProps) => {
+  const percentage = total > 0 ? (count / total) * 100 : 0;
+
+  const intentColorMap = {
+    primary: 'var(--ui-color-intent-primary)',
+    success: 'var(--ui-color-intent-success)',
+    warning: 'var(--ui-color-intent-warning)',
+    critical: 'var(--ui-color-intent-critical)',
+    telemetry: 'var(--ui-color-intent-telemetry)',
+  };
+
   return (
-    <Box p={4} rounded="xl" bg={bgColor} border borderColor={borderColor}>
-      <Box display="flex" alignItems="center" justifyContent="between" mb={3}>
-        <Text size="2xl" weight="bold" color={color}>{count}</Text>
-        <Box p={2} rounded="lg" bg="bg-white/5">
-          <Icon icon={icon} size={5} color={color} />
+    <Surface variant="muted" rounded="xl" padding={4} style={{ border: '1px solid var(--ui-color-border-default)' }}>
+      <Box display="flex" alignItems="center" justifyContent="between" marginBottom={3}>
+        <Text size="2xl" weight="bold" variant="high">{count}</Text>
+        <Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
+          <Icon icon={icon} size={5} intent={intent} />
         </Box>
       </Box>
-      <Text size="sm" weight="medium" color="text-white" block mb={1}>
+      
+      <Text size="sm" weight="medium" variant="high" block marginBottom={1}>
         {label}
       </Text>
-      <Box w="full" h="1.5" bg="bg-white/5" rounded="full" overflow="hidden">
-        <Box
-          h="full"
-          bg={color.replace('text-', 'bg-')}
-          style={{ width: `${percentage}%` }}
+      
+      <Box fullWidth height="0.375rem" bg="var(--ui-color-bg-surface-muted)" style={{ borderRadius: '9999px', overflow: 'hidden' }}>
+        <Box 
+          fullHeight 
+          bg={intentColorMap[intent]} 
+          style={{ width: `${percentage}%` }} 
         />
       </Box>
-      <Text size="xs" color="text-gray-500" mt={2}>
-        {percentage.toFixed(1)}% of total
+      
+      <Text size="xs" variant="low" marginTop={2}>
+        {Math.round(percentage)}% of total
       </Text>
-    </Box>
+    </Surface>
   );
-}
+};