portal-dashboard/app/components/ui/toaster.tsx

37 lines
958 B
TypeScript
Raw Normal View History

import {
Toast,
2024-03-19 15:38:42 +00:00
ToastAction,
ToastClose,
ToastDescription,
ToastProvider,
ToastTitle,
ToastViewport,
} from "~/components/ui/toast"
import { useToast } from "~/components/ui/use-toast"
export function Toaster() {
const { toasts } = useToast()
return (
<ToastProvider>
{toasts.map(({ id, title, description, action, cancelMutation, ...props }) => {
2024-03-19 15:38:42 +00:00
const undoButton = cancelMutation ? <ToastAction altText="Undo" onClick={cancelMutation}>Undo</ToastAction> : undefined
return (
<Toast key={id} {...props}>
<div className="grid gap-1">
{title && <ToastTitle>{title}</ToastTitle>}
{description && (
<ToastDescription>{description}</ToastDescription>
)}
</div>
{action}
2024-03-19 15:38:42 +00:00
{undoButton}
<ToastClose />
</Toast>
)
})}
<ToastViewport />
</ToastProvider>
)
}