website refactor

apps/website/ui/ErrorBanner.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import { Box } from './Box';
+import { Text } from './Text';
+import { Surface } from './Surface';
+
+export interface ErrorBannerProps {
+  message: string;
+  title?: string;
+  variant?: 'error' | 'warning' | 'info';
+}
+
+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' },
+  };
+
+  const colors = variantColors[variant];
+
+  return (
+    <Surface 
+      variant="muted" 
+      rounded="lg" 
+      border 
+      padding={4} 
+      style={{ 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>
+    </Surface>
+  );
+}