import { AlertTriangle, CheckCircle, Info, XCircle } from 'lucide-react'; import { ReactNode } from 'react'; import { Box } from './Box'; import { Icon } from './Icon'; import { Surface } from './Surface'; import { Text } from './Text'; export interface InfoBannerProps { children?: ReactNode; variant?: 'info' | 'warning' | 'success' | 'critical'; type?: 'info' | 'warning' | 'success' | 'critical'; // Alias for variant title?: string; } export const InfoBanner = ({ children, variant, type, title }: InfoBannerProps) => { const activeVariant = variant || type || 'info'; const config = { info: { icon: Info, intent: 'primary' as const, bg: 'rgba(25, 140, 255, 0.05)', border: 'rgba(25, 140, 255, 0.2)', }, warning: { icon: AlertTriangle, intent: 'warning' as const, bg: 'rgba(255, 190, 77, 0.05)', border: 'rgba(255, 190, 77, 0.2)', }, success: { icon: CheckCircle, intent: 'success' as const, bg: 'rgba(111, 227, 122, 0.05)', border: 'rgba(111, 227, 122, 0.2)', }, critical: { icon: XCircle, intent: 'critical' as const, bg: 'rgba(227, 92, 92, 0.05)', border: 'rgba(227, 92, 92, 0.2)', }, }[activeVariant]; return ( {title && ( {title} )} {children} ); };