2026-01-20 09:02:26 -06:00

29 lines
739 B
TypeScript

import { JSX } from "preact";
type AlertType = "error" | "warning" | "info";
interface AlertMessageProps {
type: AlertType;
title?: string;
message?: string;
children?: JSX.Element | string;
}
const alertStyles = {
error: "bg-red-50 border border-red-200 text-red-700",
warning: "bg-yellow-50 border border-yellow-200 text-yellow-700",
info: "bg-blue-50 border border-blue-200 text-blue-700",
};
export function AlertMessage(
{ type, title, message, children }: AlertMessageProps,
) {
const content = message ?? children;
return (
<div class={`mb-6 px-4 py-3 rounded ${alertStyles[type]}`}>
{title && <h3 class="font-medium mb-2">{title}</h3>}
<div class="text-sm">{content}</div>
</div>
);
}