({
message,
title,
duration,
type,
}: {
message: string;
title: string;
type: "success" | "error";
duration?: number;
})
| 8 | import { Title } from "../Primitives/Title"; |
| 9 | |
| 10 | const Toast = ({ |
| 11 | message, |
| 12 | title, |
| 13 | duration, |
| 14 | type, |
| 15 | }: { |
| 16 | message: string; |
| 17 | title: string; |
| 18 | type: "success" | "error"; |
| 19 | duration?: number; |
| 20 | }) => { |
| 21 | const commonRootClasses = cx( |
| 22 | "z-50 fixed top-4 left-4 py-2 w-auto md:top-4 md:right-4 md:left-auto md:top-auto md:w-full md:max-w-sm shadow-lg rounded-md", |
| 23 | "border-[1px]", |
| 24 | "radix-state-open:animate-toast-slide-in-top md:radix-state-open:animate-toast-slide-in-right", |
| 25 | "radix-state-closed:animate-toast-hide", |
| 26 | "radix-swipe-end:animate-toast-swipe-out", |
| 27 | "translate-x-radix-toast-swipe-move-x", |
| 28 | "radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]", |
| 29 | "focus:outline-none focus-visible:ring focus-visible:ring-indigo-500 focus-visible:ring-opacity-75" |
| 30 | ); |
| 31 | |
| 32 | const typeRootClasses = |
| 33 | type === "success" |
| 34 | ? "bg-slate-50 dark:bg-slate-900" |
| 35 | : "bg-rose-50 dark:bg-rose-100"; |
| 36 | |
| 37 | const titleClasses = |
| 38 | type === "success" ? "text-emerald-500" : "text-slate-900"; |
| 39 | const bodyClasses = |
| 40 | type === "success" ? "text-emerald-500" : "text-slate-700"; |
| 41 | |
| 42 | const iconType = |
| 43 | type === "success" ? "text-emerald-700 h-7 w-7" : "text-rose-700 h-7 w-7"; |
| 44 | |
| 45 | return ( |
| 46 | <ToastPrimitive.Provider duration={duration ?? 2500}> |
| 47 | <ToastPrimitive.Root className={cx(commonRootClasses, typeRootClasses)}> |
| 48 | <div className="flex"> |
| 49 | <div className="flex-1 flex items-center"> |
| 50 | <div className="flex px-4"> |
| 51 | {type === "success" ? ( |
| 52 | <InformationCircleIcon className={cx(iconType)} /> |
| 53 | ) : ( |
| 54 | <ExclamationCircleIcon className={cx(iconType)} /> |
| 55 | )} |
| 56 | </div> |
| 57 | <div className="w-full radix"> |
| 58 | <Title className={cx("-mb-0.5", titleClasses)}>{title}</Title> |
| 59 | <Body className={cx("mb-0.5", bodyClasses)}>{message}</Body> |
| 60 | </div> |
| 61 | </div> |
| 62 | </div> |
| 63 | </ToastPrimitive.Root> |
| 64 | |
| 65 | <ToastPrimitive.Viewport /> |
| 66 | </ToastPrimitive.Provider> |
| 67 | ); |
nothing calls this directly
no outgoing calls
no test coverage detected