101 lines
3.0 KiB
TypeScript
101 lines
3.0 KiB
TypeScript
import classNames from "classnames";
|
|
import toast from "react-hot-toast";
|
|
|
|
import { Check, Info } from "../icon";
|
|
|
|
type IToast = {
|
|
message: string;
|
|
toastVisible: boolean;
|
|
onClose: () => void;
|
|
};
|
|
|
|
export const SuccessToast = ({ message, toastVisible, onClose }: IToast) => (
|
|
<div
|
|
className={classNames(
|
|
"data-testid-toast-success bg-brand-default text-inverted mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
|
|
toastVisible && "animate-fade-in-up cursor-pointer"
|
|
)}
|
|
onClick={onClose}>
|
|
<span>
|
|
<Check className="h-4 w-4" />
|
|
</span>
|
|
<p data-testid="toast-success">{message}</p>
|
|
</div>
|
|
);
|
|
|
|
export const ErrorToast = ({ message, toastVisible, onClose }: IToast) => (
|
|
<div
|
|
className={classNames(
|
|
"animate-fade-in-up bg-error text-error mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
|
|
toastVisible && "animate-fade-in-up cursor-pointer"
|
|
)}
|
|
onClick={onClose}>
|
|
<span>
|
|
<Info className="h-4 w-4" />
|
|
</span>
|
|
<p data-testid="toast-error">{message}</p>
|
|
</div>
|
|
);
|
|
|
|
export const WarningToast = ({ message, toastVisible, onClose }: IToast) => (
|
|
<div
|
|
className={classNames(
|
|
"animate-fade-in-up bg-brand-default text-brand mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
|
|
toastVisible && "animate-fade-in-up cursor-pointer"
|
|
)}
|
|
onClick={onClose}>
|
|
<span>
|
|
<Info className="h-4 w-4" />
|
|
</span>
|
|
<p data-testid="toast-warning">{message}</p>
|
|
</div>
|
|
);
|
|
|
|
export const DefaultToast = ({ message, toastVisible, onClose }: IToast) => (
|
|
<div
|
|
className={classNames(
|
|
"animate-fade-in-up bg-brand-default text-inverted mb-2 flex h-auto items-center space-x-2 rounded-md p-3 text-sm font-semibold shadow-md rtl:space-x-reverse md:max-w-sm",
|
|
toastVisible && "animate-fade-in-up cursor-pointer"
|
|
)}
|
|
onClick={onClose}>
|
|
<span>
|
|
<Check className="h-4 w-4" />
|
|
</span>
|
|
<p>{message}</p>
|
|
</div>
|
|
);
|
|
|
|
const TOAST_VISIBLE_DURATION = 6000;
|
|
|
|
export function showToast(
|
|
message: string,
|
|
variant: "success" | "warning" | "error",
|
|
duration = TOAST_VISIBLE_DURATION
|
|
) {
|
|
const onClose = () => {
|
|
toast.dismiss();
|
|
};
|
|
switch (variant) {
|
|
case "success":
|
|
return toast.custom(
|
|
(t) => <SuccessToast message={message} toastVisible={t.visible} onClose={onClose} />,
|
|
{ duration }
|
|
);
|
|
case "error":
|
|
return toast.custom(
|
|
(t) => <ErrorToast message={message} toastVisible={t.visible} onClose={onClose} />,
|
|
{ duration }
|
|
);
|
|
case "warning":
|
|
return toast.custom(
|
|
(t) => <WarningToast message={message} toastVisible={t.visible} onClose={onClose} />,
|
|
{ duration }
|
|
);
|
|
default:
|
|
return toast.custom(
|
|
(t) => <DefaultToast message={message} toastVisible={t.visible} onClose={onClose} />,
|
|
{ duration }
|
|
);
|
|
}
|
|
}
|