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(function ({ id, title, description, action, ...props }) {
19          return (
20            (<Toast key={id} {...props}>
21              <div className="grid gap-1">
22                {title && <ToastTitle>{title}</ToastTitle>}
23                {description && (
24                  <ToastDescription>{description}</ToastDescription>
25                )}
26              </div>
27              {action}
28              <ToastClose />
29            </Toast>)
30          );
31        })}
32        <ToastViewport />
33      </ToastProvider>)
34    );
35  }