1
import { AlertTriangle } from "lucide-react";
2
 
3
import { apiErrorMessage } from "@/client/lib/api";
4
 
5
type Props = { error: unknown; title?: string };
6
 
7
export function ErrorBanner({ error, title = "Something went wrong" }: Props) {
8
  const message = apiErrorMessage(error);
9
  return (
10
    <div
11
      role="alert"
12
      className="flex items-start gap-3 rounded-2xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-200"
13
    >
14
      <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0 text-red-400" strokeWidth={2} aria-hidden="true" />
15
      <div>
16
        <p className="font-semibold text-red-100">{title}</p>
17
        <p className="mt-1 text-red-200/80">{message}</p>
18
      </div>
19
    </div>
20
  );
21
}