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

43 lines
1.1 KiB
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 }) => {
const undoButton = cancelMutation ? (
<ToastAction altText="Undo" onClick={cancelMutation}>
Undo
</ToastAction>
) : undefined;
return (
<Toast key={id} {...props} variant={"default"}>
<div className="grid gap-1">
{title && <ToastTitle>{title}</ToastTitle>}
{description && (
<ToastDescription>{description}</ToastDescription>
)}
</div>
{action}
{undoButton}
<ToastClose />
</Toast>
);
},
)}
<ToastViewport />
</ToastProvider>
);
}