WaledRashed24/comics

1"use client"2 3import {4  Toast,5  ToastClose,6  ToastDescription,7  ToastProvider,8  ToastTitle,9  ToastViewport,10} from "@/components/ui/toast"11import { useToast } from "@/components/ui/use-toast"12 13export 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}36