sonner

1"use client"
2 
3import { useTheme } from "next-themes"
4import { Toaster as Sonner, type ToasterProps } from "sonner"
5 
6import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
7 
8const Toaster = ({ ...props }: ToasterProps) => {
9  const { theme = "system" } = useTheme()
10 
11  return (
12    <Sonner
13      theme={theme as ToasterProps["theme"]}
14      className="toaster group"
15      icons={{
16        success: (
17          <IconPlaceholder
18            lucide="CircleCheckIcon"
19            tabler="IconCircleCheck"
20            hugeicons="CheckmarkCircle02Icon"
21            phosphor="CheckCircleIcon"
22            className="size-4"
23          />
24        ),
25        info: (
26          <IconPlaceholder
27            lucide="InfoIcon"
28            tabler="IconInfoCircle"
29            hugeicons="InformationCircleIcon"
30            phosphor="InfoIcon"
31            className="size-4"
32          />
33        ),
34        warning: (
35          <IconPlaceholder
36            lucide="TriangleAlertIcon"
37            tabler="IconAlertTriangle"
38            hugeicons="Alert02Icon"
39            phosphor="WarningIcon"
40            className="size-4"
41          />
42        ),
43        error: (
44          <IconPlaceholder
45            lucide="OctagonXIcon"
46            tabler="IconAlertOctagon"
47            hugeicons="MultiplicationSignCircleIcon"
48            phosphor="XCircleIcon"
49            className="size-4"
50          />
51        ),
52        loading: (
53          <IconPlaceholder
54            lucide="Loader2Icon"
55            tabler="IconLoader"
56            hugeicons="Loading03Icon"
57            phosphor="SpinnerIcon"
58            className="size-4 animate-spin"
59          />
60        ),
61      }}
62      style={
63        {
64          "--normal-bg": "var(--popover)",
65          "--normal-text": "var(--popover-foreground)",
66          "--normal-border": "var(--border)",
67          "--border-radius": "var(--radius)",
68        } as React.CSSProperties
69      }
70      toastOptions={{
71        classNames: {
72          toast: "cn-toast",
73        },
74      }}
75      {...props}
76    />
77  )
78}
79 
80export { Toaster }