54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { AlertCircle, X } from 'lucide-react';
|
|
|
|
interface ErrorMessageProps {
|
|
message: string;
|
|
onDismiss?: () => void;
|
|
className?: string;
|
|
variant?: 'error' | 'warning' | 'info';
|
|
}
|
|
|
|
const ErrorMessage: React.FC<ErrorMessageProps> = ({
|
|
message,
|
|
onDismiss,
|
|
className = '',
|
|
variant = 'error',
|
|
}) => {
|
|
const variantStyles = {
|
|
error: 'bg-red-50 border-red-200 text-red-800',
|
|
warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
|
|
info: 'bg-blue-50 border-blue-200 text-blue-800',
|
|
};
|
|
|
|
const iconColors = {
|
|
error: 'text-red-600',
|
|
warning: 'text-yellow-600',
|
|
info: 'text-blue-600',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`flex items-start gap-3 p-4 rounded-lg border ${variantStyles[variant]} ${className}`}
|
|
role="alert"
|
|
aria-live="polite"
|
|
>
|
|
<AlertCircle className={`w-5 h-5 flex-shrink-0 mt-0.5 ${iconColors[variant]}`} />
|
|
<div className="flex-1">
|
|
<p className="text-sm font-medium">{message}</p>
|
|
</div>
|
|
{onDismiss && (
|
|
<button
|
|
onClick={onDismiss}
|
|
className="flex-shrink-0 text-gray-400 hover:text-gray-600 transition-colors"
|
|
aria-label="Dismiss error"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ErrorMessage;
|
|
|