Sonner

1"use client"
2 
3import { useTheme } from "next-themes"
4import { Toaster as Sonner, type ToasterProps } from "sonner"
5import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
6 
7const Toaster = ({ ...props }: ToasterProps) => {
8  const { theme = "system" } = useTheme()
9 
10  return (
11    <Sonner
12      theme={theme as ToasterProps["theme"]}
13      className="toaster group"
14      icons={{
15        success: (
16          <CircleCheckIcon className="size-4" />
17        ),
18        info: (
19          <InfoIcon className="size-4" />
20        ),
21        warning: (
22          <TriangleAlertIcon className="size-4" />
23        ),
24        error: (
25          <OctagonXIcon className="size-4" />
26        ),
27        loading: (
28          <Loader2Icon className="size-4 animate-spin" />
29        ),
30      }}
31      style={
32        {
33          "--normal-bg": "var(--popover)",
34          "--normal-text": "var(--popover-foreground)",
35          "--normal-border": "var(--border)",
36          "--border-radius": "var(--radius)",
37        } as React.CSSProperties
38      }
39      toastOptions={{
40        classNames: {
41          toast: "cn-toast",
42        },
43      }}
44      {...props}
45    />
46  )
47}
48 
49export { Toaster }