Loading...
Loading...
An inline alert component designed for form validation and contextual feedback messages.
interface AlertInlineProps {
type: "error" | "success" | "info";
message: string;
field?: string;
}
const styles = {
error: { bg: "bg-red-50", text: "text-red-700", border: "border-red-200", icon: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" },
success: { bg: "bg-emerald-50", text: "text-emerald-700", border: "border-emerald-200", icon: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" },
info: { bg: "bg-blue-50", text: "text-blue-700", border: "border-blue-200", icon: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" },
};
export function AlertInline({ type, message, field }: AlertInlineProps) {
const s = styles[type];
return (
<div className={`flex items-start gap-2.5 px-4 py-2.5 rounded-lg border ${s.bg} ${s.border} ${s.text}`} role="alert">
<svg className="w-4 h-4 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d={s.icon} />
</svg>
<div className="text-sm">
{field && <span className="font-semibold capitalize">{field.replace(/-/g, " ")}: </span>}
{message}
</div>
</div>
);
}