mirror of
https://github.com/SamyRai/tercul-frontend.git
synced 2025-12-27 02:31:34 +00:00
5fe41c1b1d
Refactors Toast component to a simpler, functional implementation using useState, useEffect, and createPortal. Replit-Commit-Author: Agent Replit-Commit-Session-Id: cbacfb18-842a-4116-a907-18c0105ad8ec Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/39b5c689-6e8a-4d5a-9792-69cc81a56534/424807ac-864a-4f04-9919-0e483ee2b3ff.jpg
28 lines
698 B
TypeScript
28 lines
698 B
TypeScript
// Simple toast container
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import { Toast } from "./toast";
|
|
import { createPortal } from "react-dom";
|
|
|
|
export function Toaster() {
|
|
const { toasts, dismiss } = useToast();
|
|
|
|
if (!toasts.length) return null;
|
|
|
|
// Create a portal to render toasts at the root level
|
|
return createPortal(
|
|
<div className="fixed bottom-0 right-0 z-50 p-4 flex flex-col gap-2">
|
|
{toasts.map((toast) => (
|
|
<Toast
|
|
key={toast.id}
|
|
id={toast.id!}
|
|
title={toast.title}
|
|
description={toast.description}
|
|
variant={toast.variant}
|
|
onDismiss={dismiss}
|
|
/>
|
|
))}
|
|
</div>,
|
|
document.body
|
|
);
|
|
}
|