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