Files
Reactive-Resume/apps/client/src/providers/toaster.tsx
2023-11-05 12:31:42 +01:00

38 lines
853 B
TypeScript

import {
Toast,
ToastClose,
ToastDescription,
ToastProvider,
ToastTitle,
ToastViewport,
} from "@reactive-resume/ui";
import { useToast } from "../hooks/use-toast";
export const Toaster = () => {
const { toasts } = useToast();
return (
<ToastProvider>
{toasts.map(({ id, icon, title, description, action, ...props }) => {
return (
<Toast key={id} {...props}>
<div className="grid gap-1">
<div className="flex items-center gap-x-2">
{icon}
{title && <ToastTitle>{title}</ToastTitle>}
</div>
{description && <ToastDescription>{description}</ToastDescription>}
</div>
{action}
<ToastClose />
</Toast>
);
})}
<ToastViewport />
</ToastProvider>
);
};