| 1 | "use client"; |
| 2 | |
| 3 | import { |
| 4 | Toast, |
| 5 | ToastClose, |
| 6 | ToastDescription, |
| 7 | ToastProvider, |
| 8 | ToastTitle, |
| 9 | ToastViewport, |
| 10 | } from "@/components/ui/toast"; |
| 11 | import { useToast } from "@/components/ui/use-toast"; |
| 12 | |
| 13 | export function Toaster() { |
| 14 | const { toasts } = useToast(); |
| 15 | |
| 16 | return ( |
| 17 | <ToastProvider> |
| 18 | {toasts.map(({ id, title, description, action, ...props }) => ( |
| 19 | <Toast key={id} {...props}> |
| 20 | <div className="grid gap-1"> |
| 21 | {title && <ToastTitle>{title}</ToastTitle>} |
| 22 | {description && <ToastDescription>{description}</ToastDescription>} |
| 23 | </div> |
| 24 | {action} |
| 25 | <ToastClose /> |
| 26 | </Toast> |
| 27 | ))} |
| 28 | <ToastViewport /> |
| 29 | </ToastProvider> |
| 30 | ); |
| 31 | } |
| 32 |