feat: updated logic

components/Toast.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { X } from "lucide-react";
+
+interface ToastProps {
+    message: string;
+    onClose: () => void;
+    duration?: number;
+}
+
+export default function Toast({ message, onClose, duration = 5000 }: ToastProps) {
+    const [visible, setVisible] = useState(true);
+
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setVisible(false);
+            setTimeout(onClose, 300); // Wait for fade out animation
+        }, duration);
+
+        return () => clearTimeout(timer);
+    }, [duration, onClose]);
+
+    if (!message) return null;
+
+    return (
+        <div
+            className={`fixed top-5 left-1/2 transform -translate-x-1/2 z-50 flex items-center gap-3 px-4 py-3 bg-red-600 text-white rounded-lg shadow-lg transition-opacity duration-300 ${visible ? "opacity-100" : "opacity-0"
+                }`}
+        >
+            <span className="text-sm font-medium">{message}</span>
+            <button onClick={() => setVisible(false)} className="hover:opacity-80">
+                <X size={16} />
+            </button>
+        </div>
+    );
+}