import * as React from 'react';
import {
Toast,
ToastClose,
ToastDescription,
ToastProvider,
ToastTitle,
ToastViewport,
useToast,
} from 'ui/toast';
export function Toaster(): React.ReactElement {
const {toasts} = useToast();
return (
<ToastProvider>
{toasts.map(function ({id, title, description, action, ...props}) {
return (
<Toast key={id} {...props}>
<div className="grid gap-1">
{title && <ToastTitle>{title}</ToastTitle>}
{description && <ToastDescription>{description}</ToastDescription>}
</div>
{action}
<ToastClose />
</Toast>
);
})}
<ToastViewport />
</ToastProvider>
);
}