1import { useTheme } from "next-themes"
 2import { Toaster as Sonner } from "sonner"
 3
 4type ToasterProps = React.ComponentProps<typeof Sonner>
 5
 6const Toaster = ({ ...props }: ToasterProps) => {
 7  const { theme = "system" } = useTheme()
 8
 9  return (
10    <Sonner
11      theme={theme as ToasterProps["theme"]}
12      className="toaster group"
13      toastOptions={{
14        classNames: {
15          toast:
16            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
17          description: "group-[.toast]:text-muted-foreground",
18          actionButton:
19            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
20          cancelButton:
21            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
22        },
23      }}
24      {...props}
25    />
26  )
27}
28
29export { Toaster }