auth rework

apps/website/components/ui/InfoBanner.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import React from 'react';
+import { Info, AlertTriangle, CheckCircle, XCircle } from 'lucide-react';
+
+type BannerType = 'info' | 'warning' | 'success' | 'error';
+
+interface InfoBannerProps {
+  type?: BannerType;
+  title?: string;
+  children: React.ReactNode;
+  icon?: React.ElementType;
+}
+
+const bannerConfig: Record<BannerType, { 
+  icon: React.ElementType; 
+  bg: string; 
+  border: string; 
+  titleColor: string;
+}> = {
+  info: {
+    icon: Info,
+    bg: 'bg-iron-gray/30',
+    border: 'border-charcoal-outline/50',
+    titleColor: 'text-gray-300',
+  },
+  warning: {
+    icon: AlertTriangle,
+    bg: 'bg-warning-amber/10',
+    border: 'border-warning-amber/30',
+    titleColor: 'text-warning-amber',
+  },
+  success: {
+    icon: CheckCircle,
+    bg: 'bg-performance-green/10',
+    border: 'border-performance-green/30',
+    titleColor: 'text-performance-green',
+  },
+  error: {
+    icon: XCircle,
+    bg: 'bg-racing-red/10',
+    border: 'border-racing-red/30',
+    titleColor: 'text-racing-red',
+  },
+};
+
+/**
+ * Info banner component for displaying contextual information, warnings, or notices.
+ * Used throughout the app for important messages and helper text.
+ */
+export default function InfoBanner({ 
+  type = 'info', 
+  title,
+  children,
+  icon: CustomIcon,
+}: InfoBannerProps) {
+  const config = bannerConfig[type];
+  const Icon = CustomIcon || config.icon;
+  
+  return (
+    <div className={`flex items-start gap-3 p-4 rounded-lg border ${config.bg} ${config.border}`}>
+      <Icon className="w-5 h-5 text-gray-500 flex-shrink-0 mt-0.5" />
+      <div className="text-sm text-gray-400">
+        {title && (
+          <p className={`font-medium mb-1 ${config.titleColor}`}>{title}</p>
+        )}
+        {children}
+      </div>
+    </div>
+  );
+}