1  import {
 2    Toast,
 3    ToastClose,
 4    ToastDescription,
 5    ToastProvider,
 6    ToastTitle,
 7    ToastViewport,
 8  } from "./toast";
 9  import { useToast } from "./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  }