sonner

1"use client"
2 
3import {
4  CircleCheckIcon,
5  InfoIcon,
6  Loader2Icon,
7  OctagonXIcon,
8  TriangleAlertIcon,
9} from "lucide-react"
10import { useTheme } from "next-themes"
11import { Toaster as Sonner, type ToasterProps } from "sonner"
12 
13const Toaster = ({ ...props }: ToasterProps) => {
14  const { theme = "system" } = useTheme()
15 
16  return (
17    <Sonner
18      theme={theme as ToasterProps["theme"]}
19      className="toaster group"
20      icons={{
21        success: <CircleCheckIcon className="size-4" />,
22        info: <InfoIcon className="size-4" />,
23        warning: <TriangleAlertIcon className="size-4" />,
24        error: <OctagonXIcon className="size-4" />,
25        loading: <Loader2Icon className="size-4 animate-spin" />,
26      }}
27      toastOptions={{
28        // Fully unstyled so the neobrutalist recipe below owns every surface:
29        // hard offset shadow, 2px border, square corners, press-down buttons.
30        unstyled: true,
31        classNames: {
32          toast:
33            "group/toast relative flex w-(--width) items-center gap-3 rounded border-2 border-border bg-popover p-4 font-sans text-popover-foreground shadow-md",
34          content: "flex min-w-0 flex-col gap-0.5",
35          title: "font-head text-sm font-medium",
36          description: "text-sm text-muted-foreground",
37          icon: "shrink-0",
38          actionButton:
39            "ms-auto h-fit min-w-fit shrink-0 rounded border-2 border-border bg-primary px-2 py-1 text-xs font-medium text-primary-foreground shadow-sm transition-all duration-200 hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none",
40          cancelButton:
41            "ms-auto h-fit min-w-fit shrink-0 rounded border-2 border-border bg-muted px-2 py-1 text-xs font-medium text-foreground shadow-sm transition-all duration-200 hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none",
42          closeButton:
43            "absolute -top-2 -start-2 rounded-full border-2 border-border bg-background p-0.5 transition-colors hover:bg-muted",
44          success: "[&_[data-icon]]:text-chart-2",
45          warning: "[&_[data-icon]]:text-chart-1",
46          error: "[&_[data-icon]]:text-destructive",
47        },
48      }}
49      {...props}
50    />
51  )
52}
53 
54export { Toaster }