Sonner

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