73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
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 (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="lg"
|
|
padding={4}
|
|
style={{ backgroundColor: config.bg, border: `1px solid ${config.border}` }}
|
|
>
|
|
<Box display="flex" alignItems="start" gap={3}>
|
|
<Icon icon={config.icon} size={5} intent={config.intent} />
|
|
<Box flex={1}>
|
|
{title && (
|
|
<Text size="sm" weight="bold" variant="high" marginBottom={1} block>
|
|
{title}
|
|
</Text>
|
|
)}
|
|
<Text size="sm" variant="high">
|
|
{children}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</Surface>
|
|
);
|
|
};
|