jason.woltje
1b66417be5
Co-authored-by: Jason Woltje <[email protected]> Co-committed-by: Jason Woltje <[email protected]>
33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactElement } from "react";
|
|
import { Info, X } from "lucide-react";
|
|
|
|
export interface AuthErrorBannerProps {
|
|
message: string;
|
|
onDismiss?: () => void;
|
|
}
|
|
|
|
export function AuthErrorBanner({ message, onDismiss }: AuthErrorBannerProps): ReactElement {
|
|
return (
|
|
<div
|
|
role="alert"
|
|
aria-live="polite"
|
|
className="flex items-start gap-3 rounded-lg border border-[#f06a6f]/55 bg-[#fff1f2] p-4 text-[#9f1239] dark:border-[#e5484d]/55 dark:bg-[#3a111b]/70 dark:text-[#fecdd3]"
|
|
>
|
|
<Info className="h-5 w-5 flex-shrink-0 mt-0.5" aria-hidden="true" />
|
|
<span className="flex-1 text-sm">{message}</span>
|
|
{onDismiss && (
|
|
<button
|
|
type="button"
|
|
onClick={onDismiss}
|
|
className="flex-shrink-0 text-[#be123c] transition-colors hover:text-[#881337] dark:text-[#fda4af] dark:hover:text-[#ffe4e6]"
|
|
aria-label="Dismiss"
|
|
>
|
|
<X className="h-4 w-4" aria-hidden="true" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|