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