52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
|
import type { FunctionComponent, ReactChild } from "react";
|
||
|
|
|
||
|
|
type AlertVariant = "error" | "success" | "info" | "warning";
|
||
|
|
|
||
|
|
type AlertVariantProps = {
|
||
|
|
backgroundColor: string;
|
||
|
|
titleTextColor: string;
|
||
|
|
messageTextColor: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
title: ReactChild;
|
||
|
|
message: ReactChild;
|
||
|
|
variant: AlertVariant;
|
||
|
|
};
|
||
|
|
|
||
|
|
const ALERT_VARIANTS: Record<AlertVariant, AlertVariantProps> = {
|
||
|
|
error: {
|
||
|
|
backgroundColor: "bg-red-50",
|
||
|
|
titleTextColor: "text-red-800",
|
||
|
|
messageTextColor: "text-red-700",
|
||
|
|
},
|
||
|
|
success: {
|
||
|
|
backgroundColor: "bg-green-50",
|
||
|
|
titleTextColor: "text-green-800",
|
||
|
|
messageTextColor: "text-green-700",
|
||
|
|
},
|
||
|
|
info: {
|
||
|
|
backgroundColor: "bg-primary-50",
|
||
|
|
titleTextColor: "text-primary-800",
|
||
|
|
messageTextColor: "text-primary-700",
|
||
|
|
},
|
||
|
|
warning: {
|
||
|
|
backgroundColor: "bg-yellow-50",
|
||
|
|
titleTextColor: "text-yellow-800",
|
||
|
|
messageTextColor: "text-yellow-700",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
const Alert: FunctionComponent<Props> = ({ title, message, variant }) => {
|
||
|
|
const variantProperties = ALERT_VARIANTS[variant];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`rounded-md p-4 ${variantProperties.backgroundColor}`}>
|
||
|
|
<h3 className={`text-sm leading-5 font-medium ${variantProperties.titleTextColor}`}>{title}</h3>
|
||
|
|
<div className={`mt-2 text-sm leading-5 ${variantProperties.messageTextColor}`}>{message}</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Alert;
|