website refactor

apps/website/ui/InfoBanner.tsx

@@ -1,83 +1,75 @@
-
-
-import { AlertTriangle, CheckCircle, Info, LucideIcon, XCircle } from 'lucide-react';
 import React from 'react';
 import { Box } from './primitives/Box';
-import { Icon } from './Icon';
 import { Stack } from './primitives/Stack';
-import { Surface } from './primitives/Surface';
 import { Text } from './Text';
-
-type BannerType = 'info' | 'warning' | 'success' | 'error';
+import { Surface } from './primitives/Surface';
+import { Icon } from './Icon';
+import { Info, AlertTriangle, AlertCircle, CheckCircle, LucideIcon } from 'lucide-react';
 
 interface InfoBannerProps {
-  type?: BannerType;
   title?: string;
-  children: React.ReactNode;
+  message?: string;
+  children?: React.ReactNode;
+  variant?: 'info' | 'warning' | 'error' | 'success';
+  type?: 'info' | 'warning' | 'error' | 'success';
   icon?: LucideIcon;
 }
 
-export function InfoBanner({ 
-  type = 'info', 
-  title,
-  children,
-  icon: CustomIcon,
-}: InfoBannerProps) {
-  const bannerConfig: Record<BannerType, { 
-    icon: LucideIcon; 
-    bg: string; 
-    border: string; 
-    titleColor: string;
-    iconColor: string;
-  }> = {
+export function InfoBanner({ title, message, children, variant = 'info', type, icon }: InfoBannerProps) {
+  const configs = {
     info: {
-      icon: Info,
-      bg: 'rgba(38, 38, 38, 0.3)',
-      border: 'rgba(38, 38, 38, 0.5)',
-      titleColor: 'text-gray-300',
-      iconColor: '#9ca3af',
+      bg: 'rgba(59, 130, 246, 0.1)',
+      border: 'rgba(59, 130, 246, 0.2)',
+      iconColor: 'rgb(96, 165, 250)',
+      icon: Info
     },
     warning: {
-      icon: AlertTriangle,
       bg: 'rgba(245, 158, 11, 0.1)',
-      border: 'rgba(245, 158, 11, 0.3)',
-      titleColor: 'text-warning-amber',
-      iconColor: '#f59e0b',
-    },
-    success: {
-      icon: CheckCircle,
-      bg: 'rgba(16, 185, 129, 0.1)',
-      border: 'rgba(16, 185, 129, 0.3)',
-      titleColor: 'text-performance-green',
-      iconColor: '#10b981',
+      border: 'rgba(245, 158, 11, 0.2)',
+      iconColor: 'rgb(251, 191, 36)',
+      icon: AlertTriangle
     },
     error: {
-      icon: XCircle,
       bg: 'rgba(239, 68, 68, 0.1)',
-      border: 'rgba(239, 68, 68, 0.3)',
-      titleColor: 'text-error-red',
-      iconColor: '#ef4444',
+      border: 'rgba(239, 68, 68, 0.2)',
+      iconColor: 'rgb(248, 113, 113)',
+      icon: AlertCircle
     },
+    success: {
+      bg: 'rgba(16, 185, 129, 0.1)',
+      border: 'rgba(16, 185, 129, 0.2)',
+      iconColor: 'rgb(52, 211, 153)',
+      icon: CheckCircle
+    }
   };
 
-  const config = bannerConfig[type];
-  const BannerIcon = CustomIcon || config.icon;
-  
+  const activeVariant = type || variant;
+  const config = configs[activeVariant as keyof typeof configs] || configs.info;
+  const BannerIcon = icon || config.icon;
+
   return (
     <Surface 
       variant="muted" 
-      rounded="lg" 
+      rounded="xl" 
       border 
-      padding={4} 
-      style={{ backgroundColor: config.bg, borderColor: config.border }}
+      p={4} 
+      backgroundColor={config.bg} 
+      borderColor={config.border}
     >
       <Stack direction="row" align="start" gap={3}>
         <Icon icon={BannerIcon} size={5} color={config.iconColor} />
-        <Box style={{ flex: 1 }}>
+        <Box flex={1}>
           {title && (
-            <Text weight="medium" color={config.titleColor} block mb={1}>{title}</Text>
+            <Text weight="medium" color="text-white" block mb={1}>
+              {title}
+            </Text>
           )}
-          <Text size="sm" color="text-gray-400" block>{children}</Text>
+          {message && (
+            <Text size="sm" color="text-gray-300" block>
+              {message}
+            </Text>
+          )}
+          {children}
         </Box>
       </Stack>
     </Surface>