website refactor

apps/website/ui/SummaryItem.tsx

@@ -1,43 +1,48 @@
-
-
-import { ReactNode } from 'react';
+import React from 'react';
 import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
 import { Text } from './Text';
+import { Surface } from './primitives/Surface';
+import { Icon } from './Icon';
+import { LucideIcon } from 'lucide-react';
 
 interface SummaryItemProps {
-  title: string;
-  subtitle?: string;
-  rightContent?: ReactNode;
+  label?: string;
+  value?: string | number;
+  icon?: LucideIcon;
   onClick?: () => void;
+  title?: string;
+  subtitle?: string;
+  rightContent?: React.ReactNode;
 }
 
-export function SummaryItem({
-  title,
-  subtitle,
-  rightContent,
-  onClick,
-}: SummaryItemProps) {
+export function SummaryItem({ label, value, icon, onClick, title, subtitle, rightContent }: SummaryItemProps) {
   return (
     <Surface
       variant="muted"
-      padding={3}
       rounded="lg"
+      p={4}
+      display="flex"
+      alignItems="center"
+      gap={4}
+      cursor={onClick ? 'pointer' : 'default'}
       onClick={onClick}
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        cursor: onClick ? 'pointer' : 'default',
-      }}
+      hoverBg={onClick ? 'bg-white/5' : undefined}
+      transition={!!onClick}
     >
-      <Box>
-        <Text color="text-white" weight="medium" block>
-          {title}
-        </Text>
-        {subtitle && (
-          <Text size="xs" color="text-gray-500">
-            {subtitle}
+      {icon && (
+        <Box p={2} rounded="lg" bg="bg-white/5">
+          <Icon icon={icon} size={5} color="text-gray-400" />
+        </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>