snapme

1"use client"
2
3import { type CSSProperties } from "react"
4import { Toaster as Sonner, type ToasterProps } from "sonner"
5import {
6  CheckCircle,
7  Info,
8  SpinnerGap,
9  Warning,
10  WarningOctagon,
11} from "@phosphor-icons/react"
12
13const Toaster = ({ ...props }: ToasterProps) => {
14  return (
15    <Sonner
16      theme="light"
17      className="toaster group"
18      icons={{
19        success: <CheckCircle weight="bold" className="size-4" />,
20        info: <Info weight="bold" className="size-4" />,
21        warning: <Warning weight="bold" className="size-4" />,
22        error: <WarningOctagon weight="bold" className="size-4" />,
23        loading: <SpinnerGap weight="bold" className="size-4 animate-spin" />,
24      }}
25      style={
26        {
27          "--normal-bg": "var(--color-paper)",
28          "--normal-text": "var(--color-ink)",
29          "--normal-border": "var(--color-ink)",
30          "--border-radius": "var(--radius-card)",
31        } as CSSProperties
32      }
33      toastOptions={{
34        classNames: {
35          toast:
36            "rounded-card border-2 border-ink bg-paper text-ink font-sans shadow-hard",
37          title: "font-display text-sm font-extrabold",
38          description: "text-sm text-muted-foreground",
39        },
40      }}
41      {...props}
42    />
43  )
44}
45
46export { Toaster }
47