31 lines
959 B
TypeScript
31 lines
959 B
TypeScript
/**
|
|
* ErrorBanner - UI component for displaying error messages
|
|
*
|
|
* Pure UI element for error display in templates and components.
|
|
* No business logic, just presentation.
|
|
*/
|
|
|
|
export interface ErrorBannerProps {
|
|
message: string;
|
|
title?: string;
|
|
variant?: 'error' | 'warning' | 'info';
|
|
}
|
|
|
|
export function ErrorBanner({ message, title, variant = 'error' }: ErrorBannerProps) {
|
|
const baseClasses = 'px-4 py-3 rounded-lg border flex items-start gap-3';
|
|
|
|
const variantClasses = {
|
|
error: 'bg-racing-red/10 border-racing-red text-racing-red',
|
|
warning: 'bg-yellow-500/10 border-yellow-500 text-yellow-300',
|
|
info: 'bg-primary-blue/10 border-primary-blue text-primary-blue',
|
|
};
|
|
|
|
return (
|
|
<div className={`${baseClasses} ${variantClasses[variant]}`}>
|
|
<div className="flex-1">
|
|
{title && <div className="font-medium">{title}</div>}
|
|
<div className="text-sm opacity-90">{message}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |