45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import { AlertTriangle } from 'lucide-react';
|
|
import { Box } from './Box';
|
|
import { Icon } from './Icon';
|
|
import { Surface } from './Surface';
|
|
import { Text } from './Text';
|
|
|
|
export interface ErrorBannerProps {
|
|
title?: string;
|
|
message: string;
|
|
variant?: 'error' | 'warning' | 'info';
|
|
}
|
|
|
|
export const ErrorBanner = ({
|
|
title,
|
|
message,
|
|
variant = 'error'
|
|
}: ErrorBannerProps) => {
|
|
const intent = variant === 'error' ? 'critical' : variant === 'warning' ? 'warning' : 'primary';
|
|
const color = variant === 'error' ? 'rgba(227, 92, 92, 0.05)' : variant === 'warning' ? 'rgba(255, 190, 77, 0.05)' : 'rgba(25, 140, 255, 0.05)';
|
|
const borderColor = variant === 'error' ? 'rgba(227, 92, 92, 0.2)' : variant === 'warning' ? 'rgba(255, 190, 77, 0.2)' : 'rgba(25, 140, 255, 0.2)';
|
|
|
|
return (
|
|
<Surface
|
|
variant="muted"
|
|
rounded="lg"
|
|
padding={4}
|
|
style={{ backgroundColor: color, border: `1px solid ${borderColor}` }}
|
|
>
|
|
<Box display="flex" alignItems="start" gap={4}>
|
|
<Icon icon={AlertTriangle} size={5} intent={intent} />
|
|
<Box>
|
|
{title && (
|
|
<Text weight="medium" variant="high" block marginBottom={1}>
|
|
{title}
|
|
</Text>
|
|
)}
|
|
<Text size="sm" variant="low">
|
|
{message}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</Surface>
|
|
);
|
|
};
|