59eaa342a9
border-l-4 semantic strip, bg-paper, Lucide icons at size=16. ARIA role="alert" for error/warn, role="status" for success/info. No shadow, no radius, no transition. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
import { AlertCircle, AlertTriangle, CheckCircle, Info } from 'lucide-react';
|
|
|
|
type AlertVariant = 'error' | 'warn' | 'success' | 'info';
|
|
|
|
interface AlertBannerProps {
|
|
variant: AlertVariant;
|
|
title?: string;
|
|
children: ReactNode;
|
|
}
|
|
|
|
const CONFIG: Record<AlertVariant, { cls: string; Icon: typeof AlertCircle; role: string }> = {
|
|
error: { cls: 'alert-error', Icon: AlertCircle, role: 'alert' },
|
|
warn: { cls: 'alert-warn', Icon: AlertTriangle, role: 'alert' },
|
|
success: { cls: 'alert-success', Icon: CheckCircle, role: 'status' },
|
|
info: { cls: 'alert-info', Icon: Info, role: 'status' },
|
|
};
|
|
|
|
export function AlertBanner({ variant, title, children }: AlertBannerProps): JSX.Element {
|
|
const { cls, Icon, role } = CONFIG[variant];
|
|
return (
|
|
<div role={role} className={cls}>
|
|
<Icon size={16} aria-hidden className="mt-[2px] shrink-0" />
|
|
<div className="flex flex-col gap-xxs text-[14px]">
|
|
{title ? <span className="font-medium text-ink">{title}</span> : null}
|
|
<span className="text-charcoal">{children}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|