Glass Sonner

1'use client'
2 
3import * as React from 'react'
4import { Toaster as Sonner, toast } from 'sonner'
5 
6type GlassToasterProps = React.ComponentProps<typeof Sonner>
7 
8function GlassToaster({ ...props }: GlassToasterProps) {
9  const [theme, setTheme] = React.useState<'light' | 'dark'>('light')
10 
11  React.useEffect(() => {
12    const root = document.documentElement
13    const update = () => {
14      setTheme(root.classList.contains('dark') ? 'dark' : 'light')
15    }
16    update()
17    const observer = new MutationObserver(update)
18    observer.observe(root, { attributes: true, attributeFilter: ['class'] })
19    return () => observer.disconnect()
20  }, [])
21 
22  return (
23    <Sonner
24      theme={theme}
25      className="toaster group"
26      toastOptions={{
27        classNames: {
28          toast:
29            'group toast group-[.toaster]:rounded-2xl group-[.toaster]:border-glass-edge group-[.toaster]:bg-glass-stronger group-[.toaster]:backdrop-blur-2xl group-[.toaster]:backdrop-saturate-150 group-[.toaster]:text-foreground group-[.toaster]:shadow-[0_16px_48px_rgba(28,25,20,0.12)]',
30          description: 'group-[.toast]:text-muted-foreground',
31          actionButton: 'group-[.toast]:bg-ruri group-[.toast]:text-white dark:group-[.toast]:bg-ruri-soft dark:group-[.toast]:text-deep',
32          cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
33        },
34      }}
35      {...props}
36    />
37  )
38}
39 
40export { GlassToaster, toast }