35 lines
982 B
TypeScript
35 lines
982 B
TypeScript
import Icon from "./Icon";
|
|
|
|
type ToastState = {
|
|
tone: "success" | "error" | "info";
|
|
message: string;
|
|
};
|
|
|
|
type ToastProps = {
|
|
toast: ToastState | null;
|
|
};
|
|
|
|
const toneIconClass: Record<ToastState["tone"], string> = {
|
|
success: "bg-[#e6f7f0] text-[#177b55]",
|
|
error: "bg-[#fff0f0] text-[#b94a4a]",
|
|
info: "bg-[#eaf4fd] text-[#2675bf]",
|
|
};
|
|
|
|
export function Toast({ toast }: ToastProps) {
|
|
if (!toast) return null;
|
|
|
|
return (
|
|
<div
|
|
className="toast-enter fixed top-[82px] right-[21px] z-30 flex min-h-[46px] min-w-[260px] max-w-[410px] items-center gap-[9px] rounded-lg border border-[#cfdbe6] bg-white px-3.5 py-2.5 text-xs text-[#43566a] shadow-[0_12px_35px_rgb(20_42_66/14%)]"
|
|
role="status"
|
|
>
|
|
<span
|
|
className={`grid size-[27px] shrink-0 place-items-center rounded-full ${toneIconClass[toast.tone]}`}
|
|
>
|
|
<Icon name={toast.tone === "success" ? "check" : "info"} size={17} />
|
|
</span>
|
|
{toast.message}
|
|
</div>
|
|
);
|
|
}
|