40 lines
975 B
TypeScript
40 lines
975 B
TypeScript
|
import type { ReactNode } from 'react';
|
||
|
|
|
||
|
|
import { cn, type Accent } from '@/lib/cn';
|
||
|
|
|
||
|
|
interface AlertProps {
|
||
|
|
accent: Accent;
|
||
|
|
children: ReactNode;
|
||
|
|
className?: string;
|
||
|
|
/** Optional ARIA role override; defaults to "alert" for errors. */
|
||
|
|
role?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ACCENT_FILL: Record<Accent, string> = {
|
||
|
|
red: 'accent-fill-red',
|
||
|
|
orange: 'accent-fill-orange',
|
||
|
|
yellow: 'accent-fill-yellow',
|
||
|
|
green: 'accent-fill-green',
|
||
|
|
cyan: 'accent-fill-cyan',
|
||
|
|
blue: 'accent-fill-blue',
|
||
|
|
purple: 'accent-fill-purple',
|
||
|
|
pink: 'accent-fill-pink',
|
||
|
|
rose: 'accent-fill-rose',
|
||
|
|
teal: 'accent-fill-teal',
|
||
|
|
};
|
||
|
|
|
||
|
|
export function Alert({ accent, children, className, role }: AlertProps) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
role={role ?? (accent === 'red' || accent === 'rose' ? 'alert' : 'status')}
|
||
|
|
className={cn(
|
||
|
|
'rounded-md border border-current/30 px-3 py-2 font-mono text-xs',
|
||
|
|
ACCENT_FILL[accent],
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|