37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
|
|
|
|
import { Box } from './Box';
|
|
import { Surface } from './Surface';
|
|
import { Text } from './Text';
|
|
|
|
export interface ErrorBannerProps {
|
|
message: string;
|
|
title?: string;
|
|
variant?: 'error' | 'warning' | 'info';
|
|
}
|
|
|
|
export function ErrorBanner({ message, title, variant = 'error' }: ErrorBannerProps) {
|
|
const variantColors = {
|
|
error: { bg: 'rgba(239, 68, 68, 0.1)', border: '#ef4444', text: '#ef4444' },
|
|
warning: { bg: 'rgba(245, 158, 11, 0.1)', border: '#f59e0b', text: '#fcd34d' },
|
|
info: { bg: 'rgba(59, 130, 246, 0.1)', border: '#3b82f6', text: '#3b82f6' },
|
|
};
|
|
|
|
const colors = variantColors[variant];
|
|
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="lg"
|
|
border
|
|
padding={4}
|
|
style={{ backgroundColor: colors.bg, borderColor: colors.border }}
|
|
>
|
|
<Box style={{ flex: 1 }}>
|
|
{title && <Text weight="medium" style={{ color: colors.text }} block mb={1}>{title}</Text>}
|
|
<Text size="sm" style={{ color: colors.text, opacity: 0.9 }} block>{message}</Text>
|
|
</Box>
|
|
</Surface>
|
|
);
|
|
}
|