Toaster

1"use client";
2 
3import {
4  Alert02Icon,
5  Cancel01Icon,
6  CheckmarkCircle01Icon,
7  InformationCircleIcon,
8  Loading03Icon,
9  OctagonXIcon,
10} from "@hugeicons/core-free-icons";
11import { HugeiconsIcon } from "@hugeicons/react";
12import type * as React from "react";
13import { useTheme } from "next-themes";
14import {
15  Toaster as Sonner,
16  toast as sonnerToast,
17  type ExternalToast,
18  type ToasterProps,
19} from "sonner";
20import { cn } from "@/lib/utils";
21import { Button } from "@/components/ui/button";
22 
23type ToastVariant =
24  | "default"
25  | "success"
26  | "info"
27  | "warning"
28  | "error"
29  | "loading";
30 
31type ToastAction = {
32  label: React.ReactNode;
33  onClick?: () => void;
34};
35 
36type ToastContent = {
37  title: React.ReactNode;
38  description?: React.ReactNode;
39  variant?: ToastVariant;
40  icon?: React.ReactNode | null;
41  action?: ToastAction;
42  cancel?: ToastAction;
43} & Omit<
44  ExternalToast,
45  "icon" | "classNames" | "unstyled" | "action" | "cancel"
46>;
47 
48const variantIconMap: Partial<Record<ToastVariant, React.ReactNode>> = {
49  success: (
50    <HugeiconsIcon
51      icon={CheckmarkCircle01Icon}
52      strokeWidth={2}
53      className="size-4.5"
54    />
55  ),
56  info: (
57    <HugeiconsIcon
58      icon={InformationCircleIcon}
59      strokeWidth={2}
60      className="size-4.5"
61    />
62  ),
63  warning: (
64    <HugeiconsIcon icon={Alert02Icon} strokeWidth={2} className="size-4.5" />
65  ),
66  error: (
67    <HugeiconsIcon icon={OctagonXIcon} strokeWidth={2} className="size-4.5" />
68  ),
69  loading: (
70    <HugeiconsIcon
71      icon={Loading03Icon}
72      strokeWidth={2}
73      className="size-4.5 animate-spin"
74    />
75  ),
76};
77 
78const toast = {
79  custom: (content: ToastContent) => {
80    const {
81      title,
82      description,
83      variant,
84      icon,
85      action,
86      cancel,
87      dismissible,
88      closeButton,
89      ...sonnerOptions
90    } = content;
91    return sonnerToast.custom(
92      (id) => (
93        <ToastCard
94          id={id}
95          title={title}
96          description={description}
97          variant={variant}
98          icon={icon}
99          action={action}
100          cancel={cancel}
101          dismissible={dismissible}
102          closeButton={closeButton}
103        />
104      ),
105      {
106        ...sonnerOptions,
107        dismissible,
108        closeButton,
109      },
110    );
111  },
112  default: (
113    title: React.ReactNode,
114    options?: Omit<ToastContent, "title" | "variant">,
115  ) => toast.custom({ title, variant: "default", ...options }),
116  success: (
117    title: React.ReactNode,
118// … truncated