| 1 | "use client"; |
| 2 | |
| 3 | import { useTheme } from "next-themes"; |
| 4 | import { Toaster as Sonner } from "sonner"; |
| 5 | |
| 6 | type ToasterProps = React.ComponentProps<typeof Sonner>; |
| 7 | |
| 8 | const Toaster = ({ ...props }: ToasterProps) => { |
| 9 | const { theme = "system" } = useTheme(); |
| 10 | |
| 11 | return ( |
| 12 | <Sonner |
| 13 | theme={theme as ToasterProps["theme"]} |
| 14 | className="toaster group" |
| 15 | toastOptions={{ |
| 16 | classNames: { |
| 17 | toast: |
| 18 | "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg", |
| 19 | description: "group-[.toast]:text-muted-foreground", |
| 20 | actionButton: |
| 21 | "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground", |
| 22 | cancelButton: |
| 23 | "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground", |
| 24 | }, |
| 25 | }} |
| 26 | {...props} |
| 27 | /> |
| 28 | ); |
| 29 | }; |
| 30 | |
| 31 | export { Toaster }; |
| 32 |