website refactor

apps/website/ui/ErrorBanner.tsx

@@ -1,63 +1,45 @@
 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 { AlertCircle, XCircle, Info, AlertTriangle } from 'lucide-react';
+import { AlertTriangle } from 'lucide-react';
+import { Surface } from './primitives/Surface';
 
-interface ErrorBannerProps {
+export interface ErrorBannerProps {
   title?: string;
   message: string;
-  variant?: 'error' | 'warning' | 'info' | 'success';
+  variant?: 'error' | 'warning' | 'info';
 }
 
-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 = configs[variant];
+export const ErrorBanner = ({ 
+  title, 
+  message,
+  variant = 'error' 
+}: ErrorBannerProps) => {
+  const intent = variant === 'error' ? 'critical' : variant === 'warning' ? 'warning' : 'primary';
+  const color = variant === 'error' ? 'rgba(227, 92, 92, 0.05)' : variant === 'warning' ? 'rgba(255, 190, 77, 0.05)' : 'rgba(25, 140, 255, 0.05)';
+  const borderColor = variant === 'error' ? 'rgba(227, 92, 92, 0.2)' : variant === 'warning' ? 'rgba(255, 190, 77, 0.2)' : 'rgba(25, 140, 255, 0.2)';
 
   return (
     <Surface 
       variant="muted" 
-      rounded="xl" 
-      border 
-      p={4} 
-      backgroundColor={colors.bg} 
-      borderColor={colors.border}
+      rounded="lg" 
+      padding={4} 
+      style={{ backgroundColor: color, border: `1px solid ${borderColor}` }}
     >
-      <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 display="flex" alignItems="start" gap={4}>
+        <Icon icon={AlertTriangle} size={5} intent={intent} />
+        <Box>
+          {title && (
+            <Text weight="medium" variant="high" block marginBottom={1}>
+              {title}
+            </Text>
+          )}
+          <Text size="sm" variant="low">
+            {message}
+          </Text>
         </Box>
-      </Stack>
+      </Box>
     </Surface>
   );
-}
+};