import type { ReactElement } from "react"; type AlertVariant = "error" | "success" | "info" | "warning"; type AlertVariantProps = { backgroundColor: string; icon: ReactElement; titleTextColor: string; messageTextColor: string; }; type Props = { title: string; message: string; variant: AlertVariant; }; const ALERT_VARIANTS: Record = { error: { backgroundColor: "bg-red-50", icon: ( ), titleTextColor: "text-red-800", messageTextColor: "text-red-700", }, success: { backgroundColor: "bg-green-50", icon: ( ), titleTextColor: "text-green-800", messageTextColor: "text-green-700", }, info: { backgroundColor: "bg-primary-50", icon: ( ), titleTextColor: "text-primary-800", messageTextColor: "text-primary-700", }, warning: { backgroundColor: "bg-yellow-50", icon: ( ), titleTextColor: "text-yellow-800", messageTextColor: "text-yellow-700", }, }; export default function Alert({ title, message, variant }: Props) { const variantProperties = ALERT_VARIANTS[variant]; return (
{variantProperties.icon}

{title}

{message}
); }