website refactor

apps/website/ui/InfoBanner.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import React from 'react';
+import { Info, AlertTriangle, CheckCircle, XCircle, LucideIcon } from 'lucide-react';
+import { Box } from './Box';
+import { Stack } from './Stack';
+import { Text } from './Text';
+import { Surface } from './Surface';
+import { Icon } from './Icon';
+
+type BannerType = 'info' | 'warning' | 'success' | 'error';
+
+interface InfoBannerProps {
+  type?: BannerType;
+  title?: string;
+  children: React.ReactNode;
+  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;
+  }> = {
+    info: {
+      icon: Info,
+      bg: 'rgba(38, 38, 38, 0.3)',
+      border: 'rgba(38, 38, 38, 0.5)',
+      titleColor: 'text-gray-300',
+      iconColor: '#9ca3af',
+    },
+    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',
+    },
+    error: {
+      icon: XCircle,
+      bg: 'rgba(239, 68, 68, 0.1)',
+      border: 'rgba(239, 68, 68, 0.3)',
+      titleColor: 'text-error-red',
+      iconColor: '#ef4444',
+    },
+  };
+
+  const config = bannerConfig[type];
+  const BannerIcon = CustomIcon || config.icon;
+  
+  return (
+    <Surface 
+      variant="muted" 
+      rounded="lg" 
+      border 
+      padding={4} 
+      style={{ 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 }}>
+          {title && (
+            <Text weight="medium" color={config.titleColor as any} block mb={1}>{title}</Text>
+          )}
+          <Text size="sm" color="text-gray-400" block>{children}</Text>
+        </Box>
+      </Stack>
+    </Surface>
+  );
+}