website refactor

apps/website/ui/SummaryItem.tsx

@@ -1,13 +1,18 @@
+import { LucideIcon } from 'lucide-react';
+import { Box } from './Box';
 import { Icon } from './Icon';
 import { Surface } from './Surface';
 import { Text } from './Text';
 
 export interface SummaryItemProps {
-  label: string;
-  value: string | number;
-  icon: LucideIcon;
+  label?: string;
+  value?: string | number;
+  icon?: LucideIcon;
   intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
   onClick?: () => void;
+  title?: string;
+  subtitle?: string;
+  rightContent?: React.ReactNode;
 }
 
 export const SummaryItem = ({ 
@@ -15,8 +20,14 @@ export const SummaryItem = ({
   value, 
   icon, 
   intent = 'primary',
-  onClick 
+  onClick,
+  title,
+  subtitle,
+  rightContent
 }: SummaryItemProps) => {
+  const finalTitle = title || label || '';
+  const finalValue = value || subtitle || '';
+
   return (
     <Surface 
       variant="muted" 
@@ -25,18 +36,23 @@ export const SummaryItem = ({
       onClick={onClick}
       style={{ cursor: onClick ? 'pointer' : 'default' }}
     >
-      <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>
-          <Text size="xs" weight="bold" variant="low" uppercase>
-            {label}
-          </Text>
-          <Text size="lg" weight="bold" variant="high" block marginTop={0.5}>
-            {value}
-          </Text>
+      <Box display="flex" alignItems="center" justifyContent="between">
+        <Box display="flex" alignItems="center" gap={4}>
+          {icon && (
+            <Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
+              <Icon icon={icon} size={5} intent={intent} />
+            </Box>
+          )}
+          <Box>
+            <Text size="xs" weight="bold" variant="low" uppercase>
+              {finalTitle}
+            </Text>
+            <Text size="lg" weight="bold" variant="high" block marginTop={0.5}>
+              {finalValue}
+            </Text>
+          </Box>
         </Box>
+        {rightContent}
       </Box>
     </Surface>
   );