website refactor

apps/website/ui/InfoBanner.tsx

@@ -1,77 +1,72 @@
-import React from 'react';
+import React, { ReactNode } 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 { Info, AlertTriangle, AlertCircle, CheckCircle, LucideIcon } from 'lucide-react';
+import { Info, AlertTriangle, CheckCircle, XCircle } from 'lucide-react';
+import { Surface } from './primitives/Surface';
 
-interface InfoBannerProps {
+export interface InfoBannerProps {
+  children?: ReactNode;
+  variant?: 'info' | 'warning' | 'success' | 'critical';
+  type?: 'info' | 'warning' | 'success' | 'critical'; // Alias for variant
   title?: string;
-  message?: string;
-  children?: React.ReactNode;
-  variant?: 'info' | 'warning' | 'error' | 'success';
-  type?: 'info' | 'warning' | 'error' | 'success';
-  icon?: LucideIcon;
 }
 
-export function InfoBanner({ title, message, children, variant = 'info', type, icon }: InfoBannerProps) {
-  const configs = {
+export const InfoBanner = ({ 
+  children, 
+  variant,
+  type,
+  title
+}: InfoBannerProps) => {
+  const activeVariant = variant || type || 'info';
+  
+  const config = {
     info: {
-      bg: 'rgba(59, 130, 246, 0.1)',
-      border: 'rgba(59, 130, 246, 0.2)',
-      iconColor: 'rgb(96, 165, 250)',
-      icon: Info
+      icon: Info,
+      intent: 'primary' as const,
+      bg: 'rgba(25, 140, 255, 0.05)',
+      border: 'rgba(25, 140, 255, 0.2)',
     },
     warning: {
-      bg: 'rgba(245, 158, 11, 0.1)',
-      border: 'rgba(245, 158, 11, 0.2)',
-      iconColor: 'rgb(251, 191, 36)',
-      icon: AlertTriangle
-    },
-    error: {
-      bg: 'rgba(239, 68, 68, 0.1)',
-      border: 'rgba(239, 68, 68, 0.2)',
-      iconColor: 'rgb(248, 113, 113)',
-      icon: AlertCircle
+      icon: AlertTriangle,
+      intent: 'warning' as const,
+      bg: 'rgba(255, 190, 77, 0.05)',
+      border: 'rgba(255, 190, 77, 0.2)',
     },
     success: {
-      bg: 'rgba(16, 185, 129, 0.1)',
-      border: 'rgba(16, 185, 129, 0.2)',
-      iconColor: 'rgb(52, 211, 153)',
-      icon: CheckCircle
-    }
-  };
-
-  const activeVariant = type || variant;
-  const config = configs[activeVariant as keyof typeof configs] || configs.info;
-  const BannerIcon = icon || config.icon;
+      icon: CheckCircle,
+      intent: 'success' as const,
+      bg: 'rgba(111, 227, 122, 0.05)',
+      border: 'rgba(111, 227, 122, 0.2)',
+    },
+    critical: {
+      icon: XCircle,
+      intent: 'critical' as const,
+      bg: 'rgba(227, 92, 92, 0.05)',
+      border: 'rgba(227, 92, 92, 0.2)',
+    },
+  }[activeVariant];
 
   return (
     <Surface 
       variant="muted" 
-      rounded="xl" 
-      border 
-      p={4} 
-      backgroundColor={config.bg} 
-      borderColor={config.border}
+      rounded="lg" 
+      padding={4} 
+      style={{ backgroundColor: config.bg, border: `1px solid ${config.border}` }}
     >
-      <Stack direction="row" align="start" gap={3}>
-        <Icon icon={BannerIcon} size={5} color={config.iconColor} />
+      <Box display="flex" alignItems="start" gap={3}>
+        <Icon icon={config.icon} size={5} intent={config.intent} />
         <Box flex={1}>
           {title && (
-            <Text weight="medium" color="text-white" block mb={1}>
+            <Text size="sm" weight="bold" variant="high" marginBottom={1} block>
               {title}
             </Text>
           )}
-          {message && (
-            <Text size="sm" color="text-gray-300" block>
-              {message}
-            </Text>
-          )}
-          {children}
+          <Text size="sm" variant="high">
+            {children}
+          </Text>
         </Box>
-      </Stack>
+      </Box>
     </Surface>
   );
-}
+};