78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Stack } from './primitives/Stack';
|
|
import { Text } from './Text';
|
|
import { Surface } from './primitives/Surface';
|
|
import { Icon } from './Icon';
|
|
import { Info, AlertTriangle, AlertCircle, CheckCircle, LucideIcon } from 'lucide-react';
|
|
|
|
interface InfoBannerProps {
|
|
title?: string;
|
|
message?: string;
|
|
children?: React.ReactNode;
|
|
variant?: 'info' | 'warning' | 'error' | 'success';
|
|
type?: 'info' | 'warning' | 'error' | 'success';
|
|
icon?: LucideIcon;
|
|
}
|
|
|
|
export function InfoBanner({ title, message, children, variant = 'info', type, icon }: InfoBannerProps) {
|
|
const configs = {
|
|
info: {
|
|
bg: 'rgba(59, 130, 246, 0.1)',
|
|
border: 'rgba(59, 130, 246, 0.2)',
|
|
iconColor: 'rgb(96, 165, 250)',
|
|
icon: Info
|
|
},
|
|
warning: {
|
|
bg: 'rgba(245, 158, 11, 0.1)',
|
|
border: 'rgba(245, 158, 11, 0.2)',
|
|
iconColor: 'rgb(251, 191, 36)',
|
|
icon: AlertTriangle
|
|
},
|
|
error: {
|
|
bg: 'rgba(239, 68, 68, 0.1)',
|
|
border: 'rgba(239, 68, 68, 0.2)',
|
|
iconColor: 'rgb(248, 113, 113)',
|
|
icon: AlertCircle
|
|
},
|
|
success: {
|
|
bg: 'rgba(16, 185, 129, 0.1)',
|
|
border: 'rgba(16, 185, 129, 0.2)',
|
|
iconColor: 'rgb(52, 211, 153)',
|
|
icon: CheckCircle
|
|
}
|
|
};
|
|
|
|
const activeVariant = type || variant;
|
|
const config = configs[activeVariant as keyof typeof configs] || configs.info;
|
|
const BannerIcon = icon || config.icon;
|
|
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="xl"
|
|
border
|
|
p={4}
|
|
backgroundColor={config.bg}
|
|
borderColor={config.border}
|
|
>
|
|
<Stack direction="row" align="start" gap={3}>
|
|
<Icon icon={BannerIcon} size={5} color={config.iconColor} />
|
|
<Box flex={1}>
|
|
{title && (
|
|
<Text weight="medium" color="text-white" block mb={1}>
|
|
{title}
|
|
</Text>
|
|
)}
|
|
{message && (
|
|
<Text size="sm" color="text-gray-300" block>
|
|
{message}
|
|
</Text>
|
|
)}
|
|
{children}
|
|
</Box>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|