website refactor

apps/website/ui/SummaryItem.tsx

@@ -1,56 +1,46 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { Box } from './primitives/Box';
 import { Text } from './Text';
 import { Surface } from './primitives/Surface';
 import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
 
-interface SummaryItemProps {
-  label?: string;
-  value?: string | number;
-  icon?: LucideIcon;
+export interface SummaryItemProps {
+  label: string;
+  value: string | number;
+  icon: LucideIcon;
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
   onClick?: () => void;
-  title?: string;
-  subtitle?: string;
-  rightContent?: React.ReactNode;
 }
 
-export function SummaryItem({ label, value, icon, onClick, title, subtitle, rightContent }: SummaryItemProps) {
+export const SummaryItem = ({ 
+  label, 
+  value, 
+  icon, 
+  intent = 'primary',
+  onClick 
+}: SummaryItemProps) => {
   return (
-    <Surface
-      variant="muted"
-      rounded="lg"
-      p={4}
-      display="flex"
-      alignItems="center"
-      gap={4}
-      cursor={onClick ? 'pointer' : 'default'}
+    <Surface 
+      variant="muted" 
+      rounded="lg" 
+      padding={4} 
       onClick={onClick}
-      hoverBg={onClick ? 'bg-white/5' : undefined}
-      transition={!!onClick}
+      style={{ cursor: onClick ? 'pointer' : 'default' }}
     >
-      {icon && (
-        <Box p={2} rounded="lg" bg="bg-white/5">
-          <Icon icon={icon} size={5} color="text-gray-400" />
+      <Box display="flex" alignItems="center" gap={4}>
+        <Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
+          <Icon icon={icon} size={5} intent={intent} />
         </Box>
-      )}
-      <Box flex={1}>
-        {(label || title) && (
-          <Text size="xs" color="text-gray-500" uppercase letterSpacing="wider" block>
-            {label || title}
-          </Text>
-        )}
-        {(value || subtitle) && (
-          <Text size="lg" weight="bold" color="text-white" block>
-            {value || subtitle}
-          </Text>
-        )}
-      </Box>
-      {rightContent && (
         <Box>
-          {rightContent}
+          <Text size="xs" weight="bold" variant="low" uppercase>
+            {label}
+          </Text>
+          <Text size="lg" weight="bold" variant="high" block marginTop={0.5}>
+            {value}
+          </Text>
         </Box>
-      )}
+      </Box>
     </Surface>
   );
-}
+};