81b5204258
- AUTH-014: Fix theme storage key (jarvis-theme -> mosaic-theme) - AUTH-016: Create AuthDivider component with customizable text - AUTH-019: Create SessionExpiryWarning floating banner (PDA-friendly, blue) - Fix lint errors in LoginForm, OAuthButton from parallel agents - Sync pnpm-lock.yaml for recharts dependency Refs #415 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
33 lines
907 B
TypeScript
33 lines
907 B
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="bg-blue-50 border border-blue-200 text-blue-700 rounded-lg p-4 flex items-start gap-3"
|
|
>
|
|
<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-blue-500 hover:text-blue-700 transition-colors"
|
|
aria-label="Dismiss"
|
|
>
|
|
<X className="h-4 w-4" aria-hidden="true" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|