website refactor

apps/website/ui/HorizontalStatCard.tsx

@@ -7,21 +7,31 @@ import { Text } from './Text';
 export interface HorizontalStatCardProps {
   label: string;
   value: string | number;
-  icon: LucideIcon;
+  icon: LucideIcon | React.ReactNode;
   intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
+  subValue?: string;
+  iconBgColor?: string;
 }
 
 export const HorizontalStatCard = ({ 
   label, 
   value, 
   icon, 
-  intent = 'primary' 
+  intent = 'primary',
+  subValue,
+  iconBgColor
 }: HorizontalStatCardProps) => {
+  const isLucideIcon = typeof icon === 'function' || (typeof icon === 'object' && icon !== null && 'render' in icon);
+
   return (
     <Card variant="default">
       <Box display="flex" alignItems="center" gap={4}>
-        <Box padding={3} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
-          <Icon icon={icon} size={5} intent={intent} />
+        <Box padding={3} rounded="lg" bg={iconBgColor || "var(--ui-color-bg-surface-muted)"}>
+          {isLucideIcon ? (
+            <Icon icon={icon as LucideIcon} size={5} intent={intent} />
+          ) : (
+            icon
+          )}
         </Box>
         <Box>
           <Text size="xs" weight="bold" variant="low" uppercase>
@@ -30,6 +40,11 @@ export const HorizontalStatCard = ({
           <Text size="xl" weight="bold" variant="high" block marginTop={0.5}>
             {value}
           </Text>
+          {subValue && (
+            <Text size="xs" variant="low" block marginTop={0.5}>
+              {subValue}
+            </Text>
+          )}
         </Box>
       </Box>
     </Card>