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	return (
9		<Sonner
10			theme={theme as ToasterProps["theme"]}
11			className="toaster group"
12			style={
13				{
14					"--normal-bg": "var(--color-popover)",
15					"--normal-text": "var(--color-popover-foreground)",
16					"--normal-border": "var(--color-border)",
17					"--error-bg": "var(--color-danger)",
18					"--error-text": "var(--color-danger-foreground)",
19					"--error-border": "var(--color-danger-border)",
20					"--warning-bg": "var(--color-warning)",
21					"--warning-text": "var(--color-warning-foreground)",
22					"--warning-border": "var(--color-warning-border)",
23					"--info-bg": "var(--color-info)",
24					"--info-text": "var(--color-info-foreground)",
25					"--info-border": "var(--color-info-border)",
26					"--success-bg": "var(--color-success)",
27					"--success-text": "var(--color-success-foreground)",
28					"--success-border": "var(--color-success-border)",
29				} as React.CSSProperties
30			}
31			{...props}
32		/>
33	)
34}
35 
36export { Toaster }