1
import { AlertCircle } from "lucide-react";
2
 
3
interface ErrorBannerProps {
4
  message: string;
5
  onDismiss?: () => void;
6
}
7
 
8
export const ErrorBanner = ({ message, onDismiss }: ErrorBannerProps) => (
9
  <div
10
    role="alert"
11
    className="flex items-start gap-3 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-300"
12
  >
13
    <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0 text-red-400" strokeWidth={2} aria-hidden="true" />
14
    <p className="flex-1">{message}</p>
15
    {onDismiss ? (
16
      <button
17
        type="button"
18
        onClick={onDismiss}
19
        className="text-xs text-red-400/80 hover:text-red-300"
20
        aria-label="Dismiss"
21
      >
22
        Dismiss
23
      </button>
24
    ) : null}
25
  </div>
26
);