website refactor

apps/website/ui/ErrorBanner.tsx

@@ -1,36 +1,63 @@
-
-
+import React from 'react';
 import { Box } from './primitives/Box';
-import { Surface } from './primitives/Surface';
+import { Stack } from './primitives/Stack';
 import { Text } from './Text';
+import { Surface } from './primitives/Surface';
+import { Icon } from './Icon';
+import { AlertCircle, XCircle, Info, AlertTriangle } from 'lucide-react';
 
-export interface ErrorBannerProps {
-  message: string;
+interface ErrorBannerProps {
   title?: string;
-  variant?: 'error' | 'warning' | 'info';
+  message: string;
+  variant?: 'error' | 'warning' | 'info' | 'success';
 }
 
-export function ErrorBanner({ message, title, variant = 'error' }: ErrorBannerProps) {
-  const variantColors = {
-    error: { bg: 'rgba(239, 68, 68, 0.1)', border: '#ef4444', text: '#ef4444' },
-    warning: { bg: 'rgba(245, 158, 11, 0.1)', border: '#f59e0b', text: '#fcd34d' },
-    info: { bg: 'rgba(59, 130, 246, 0.1)', border: '#3b82f6', text: '#3b82f6' },
+export function ErrorBanner({ title, message, variant = 'error' }: ErrorBannerProps) {
+  const configs = {
+    error: {
+      bg: 'rgba(239, 68, 68, 0.1)',
+      border: 'rgba(239, 68, 68, 0.2)',
+      text: 'rgb(248, 113, 113)',
+      icon: XCircle
+    },
+    warning: {
+      bg: 'rgba(245, 158, 11, 0.1)',
+      border: 'rgba(245, 158, 11, 0.2)',
+      text: 'rgb(251, 191, 36)',
+      icon: AlertTriangle
+    },
+    info: {
+      bg: 'rgba(59, 130, 246, 0.1)',
+      border: 'rgba(59, 130, 246, 0.2)',
+      text: 'rgb(96, 165, 250)',
+      icon: Info
+    },
+    success: {
+      bg: 'rgba(16, 185, 129, 0.1)',
+      border: 'rgba(16, 185, 129, 0.2)',
+      text: 'rgb(52, 211, 153)',
+      icon: AlertCircle
+    }
   };
 
-  const colors = variantColors[variant];
+  const colors = configs[variant];
 
   return (
     <Surface 
       variant="muted" 
-      rounded="lg" 
+      rounded="xl" 
       border 
-      padding={4} 
-      style={{ backgroundColor: colors.bg, borderColor: colors.border }}
+      p={4} 
+      backgroundColor={colors.bg} 
+      borderColor={colors.border}
     >
-      <Box style={{ flex: 1 }}>
-        {title && <Text weight="medium" style={{ color: colors.text }} block mb={1}>{title}</Text>}
-        <Text size="sm" style={{ color: colors.text, opacity: 0.9 }} block>{message}</Text>
-      </Box>
+      <Stack direction="row" align="start" gap={3}>
+        <Icon icon={colors.icon} size={5} color={colors.text} />
+        <Box flex={1}>
+          {title && <Text weight="medium" color={colors.text} block mb={1}>{title}</Text>}
+          <Text size="sm" color={colors.text} opacity={0.9} block>{message}</Text>
+        </Box>
+      </Stack>
     </Surface>
   );
 }