86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
|
|
|
|
import { AlertTriangle, CheckCircle, Info, LucideIcon, XCircle } from 'lucide-react';
|
|
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Icon } from './Icon';
|
|
import { Stack } from './Stack';
|
|
import { Surface } from './Surface';
|
|
import { Text } from './Text';
|
|
|
|
type BannerType = 'info' | 'warning' | 'success' | 'error';
|
|
|
|
interface InfoBannerProps {
|
|
type?: BannerType;
|
|
title?: string;
|
|
children: React.ReactNode;
|
|
icon?: LucideIcon;
|
|
}
|
|
|
|
export function InfoBanner({
|
|
type = 'info',
|
|
title,
|
|
children,
|
|
icon: CustomIcon,
|
|
}: InfoBannerProps) {
|
|
const bannerConfig: Record<BannerType, {
|
|
icon: LucideIcon;
|
|
bg: string;
|
|
border: string;
|
|
titleColor: string;
|
|
iconColor: string;
|
|
}> = {
|
|
info: {
|
|
icon: Info,
|
|
bg: 'rgba(38, 38, 38, 0.3)',
|
|
border: 'rgba(38, 38, 38, 0.5)',
|
|
titleColor: 'text-gray-300',
|
|
iconColor: '#9ca3af',
|
|
},
|
|
warning: {
|
|
icon: AlertTriangle,
|
|
bg: 'rgba(245, 158, 11, 0.1)',
|
|
border: 'rgba(245, 158, 11, 0.3)',
|
|
titleColor: 'text-warning-amber',
|
|
iconColor: '#f59e0b',
|
|
},
|
|
success: {
|
|
icon: CheckCircle,
|
|
bg: 'rgba(16, 185, 129, 0.1)',
|
|
border: 'rgba(16, 185, 129, 0.3)',
|
|
titleColor: 'text-performance-green',
|
|
iconColor: '#10b981',
|
|
},
|
|
error: {
|
|
icon: XCircle,
|
|
bg: 'rgba(239, 68, 68, 0.1)',
|
|
border: 'rgba(239, 68, 68, 0.3)',
|
|
titleColor: 'text-error-red',
|
|
iconColor: '#ef4444',
|
|
},
|
|
};
|
|
|
|
const config = bannerConfig[type];
|
|
const BannerIcon = CustomIcon || config.icon;
|
|
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="lg"
|
|
border
|
|
padding={4}
|
|
style={{ backgroundColor: config.bg, borderColor: config.border }}
|
|
>
|
|
<Stack direction="row" align="start" gap={3}>
|
|
<Icon icon={BannerIcon} size={5} color={config.iconColor} />
|
|
<Box style={{ flex: 1 }}>
|
|
{title && (
|
|
<Text weight="medium" color={config.titleColor} block mb={1}>{title}</Text>
|
|
)}
|
|
<Text size="sm" color="text-gray-400" block>{children}</Text>
|
|
</Box>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|