sonner

1'use client';
2 
3import { useTheme } from 'next-themes';
4import { Toaster as Sonner, type ToasterProps } from 'sonner';
5import {
6  ArrowPathIcon,
7  CheckCircleIcon,
8  ExclamationTriangleIcon,
9  InformationCircleIcon,
10  XCircleIcon,
11} from '@heroicons/react/16/solid';
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: <CheckCircleIcon className="size-4" />,
22        info: <InformationCircleIcon className="size-4" />,
23        warning: <ExclamationTriangleIcon className="size-4" />,
24        error: <XCircleIcon className="size-4" />,
25        loading: <ArrowPathIcon className="size-4 animate-spin" />,
26      }}
27      style={
28        {
29          '--normal-bg': 'var(--popover)',
30          '--normal-text': 'var(--popover-foreground)',
31          '--normal-border': 'var(--border)',
32          '--border-radius': 'var(--radius)',
33        } as React.CSSProperties
34      }
35      toastOptions={{
36        classNames: {
37          toast: 'cn-toast',
38        },
39      }}
40      {...props}
41    />
42  );
43};
44 
45export { Toaster };