sonner

1"use client"
2
3import { useTheme } from "next-themes"
4import { Toaster as Sonner, ToasterProps } from "sonner"
5
6const Toaster = ({ ...props }: ToasterProps) => {
7  const { theme = "system" } = useTheme()
8
9  return (
10    <Sonner
11      theme={theme as ToasterProps["theme"]}
12      style={{ fontFamily: "inherit", overflowWrap: "anywhere" }}
13      toastOptions={{
14        unstyled: true,
15        classNames: {
16          toast:
17            "bg-background text-foreground border-border border-2 font-heading shadow-shadow rounded-base text-[13px] flex items-center gap-2.5 p-4 w-[356px] [&:has(button)]:justify-between",
18          description: "font-base",
19          actionButton:
20            "font-base border-2 text-[12px] h-6 px-2 bg-main text-main-foreground border-border rounded-base shrink-0",
21          cancelButton:
22            "font-base border-2 text-[12px] h-6 px-2 bg-secondary-background text-foreground border-border rounded-base shrink-0",
23          error: "bg-black text-white",
24          loading:
25            "[&[data-sonner-toast]_[data-icon]]:flex [&[data-sonner-toast]_[data-icon]]:size-4 [&[data-sonner-toast]_[data-icon]]:relative [&[data-sonner-toast]_[data-icon]]:justify-start [&[data-sonner-toast]_[data-icon]]:items-center [&[data-sonner-toast]_[data-icon]]:flex-shrink-0",
26        },
27      }}
28      {...props}
29    />
30  )
31}
32
33export { Toaster }
34