website refactor

apps/website/ui/InfoBox.tsx

@@ -1,66 +1,72 @@
 import React from 'react';
 import { Box } from './primitives/Box';
-import { Stack } from './primitives/Stack';
 import { Text } from './Text';
-import { Surface } from './primitives/Surface';
 import { Icon } from './Icon';
 import { LucideIcon } from 'lucide-react';
+import { Surface } from './primitives/Surface';
 
-interface InfoBoxProps {
+export interface InfoBoxProps {
   title: string;
   description: string;
   icon: LucideIcon;
-  variant?: 'info' | 'warning' | 'error' | 'success';
+  intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
+  variant?: string; // Alias for intent
 }
 
-export function InfoBox({ title, description, icon, variant = 'info' }: InfoBoxProps) {
-  const configs = {
-    info: {
-      bg: 'rgba(59, 130, 246, 0.1)',
-      border: 'rgba(59, 130, 246, 0.2)',
-      icon: 'rgb(96, 165, 250)',
-      text: 'text-white'
-    },
-    warning: {
-      bg: 'rgba(245, 158, 11, 0.1)',
-      border: 'rgba(245, 158, 11, 0.2)',
-      icon: 'rgb(251, 191, 36)',
-      text: 'text-white'
-    },
-    error: {
-      bg: 'rgba(239, 68, 68, 0.1)',
-      border: 'rgba(239, 68, 68, 0.2)',
-      icon: 'rgb(248, 113, 113)',
-      text: 'text-white'
+export const InfoBox = ({ 
+  title, 
+  description, 
+  icon, 
+  intent = 'primary',
+  variant 
+}: InfoBoxProps) => {
+  const activeIntent = (variant || intent) as any;
+  
+  const configMap: any = {
+    primary: {
+      bg: 'rgba(25, 140, 255, 0.05)',
+      border: 'rgba(25, 140, 255, 0.2)',
     },
     success: {
-      bg: 'rgba(16, 185, 129, 0.1)',
-      border: 'rgba(16, 185, 129, 0.2)',
-      icon: 'rgb(52, 211, 153)',
-      text: 'text-white'
-    }
+      bg: 'rgba(111, 227, 122, 0.05)',
+      border: 'rgba(111, 227, 122, 0.2)',
+    },
+    warning: {
+      bg: 'rgba(255, 190, 77, 0.05)',
+      border: 'rgba(255, 190, 77, 0.2)',
+    },
+    critical: {
+      bg: 'rgba(227, 92, 92, 0.05)',
+      border: 'rgba(227, 92, 92, 0.2)',
+    },
+    telemetry: {
+      bg: 'rgba(78, 212, 224, 0.05)',
+      border: 'rgba(78, 212, 224, 0.2)',
+    },
   };
 
-  const colors = configs[variant];
+  const config = configMap[activeIntent] || configMap.primary;
 
   return (
     <Surface 
       variant="muted" 
       rounded="xl" 
-      border 
-      p={4} 
-      backgroundColor={colors.bg} 
-      borderColor={colors.border}
+      padding={4} 
+      style={{ backgroundColor: config.bg, border: `1px solid ${config.border}` }}
     >
-      <Stack direction="row" align="start" gap={3}>
-        <Surface variant="muted" rounded="lg" p={2} bg="bg-white/5">
-          <Icon icon={icon} size={5} color={colors.icon} />
+      <Box display="flex" alignItems="start" gap={4}>
+        <Surface variant="muted" rounded="lg" padding={2} style={{ backgroundColor: 'rgba(255,255,255,0.05)' }}>
+          <Icon icon={icon} size={5} intent={activeIntent} />
         </Surface>
         <Box>
-          <Text weight="medium" color={colors.text} block>{title}</Text>
-          <Text size="sm" color="text-gray-400" block mt={1}>{description}</Text>
+          <Text weight="medium" variant="high" block>
+            {title}
+          </Text>
+          <Text size="sm" variant="low" block marginTop={1}>
+            {description}
+          </Text>
         </Box>
-      </Stack>
+      </Box>
     </Surface>
   );
-}
+};