change toast

2026-07-20 10:55:33 +03:30
parent feed194673
commit d3fd21177b
97 changed files with 437 additions and 411 deletions
@@ -0,0 +1,54 @@
+'use client'
+import { CloseCircle, InfoCircle, TickCircle } from 'iconsax-react';
+import React, { useState, useEffect } from 'react';
+
+interface Toast {
+    id: string;
+    message: string;
+    type?: 'success' | 'error' | 'info';
+}
+
+let addToast: (toast: Toast) => void = () => {};
+
+const ToastContainer: React.FC = () => {
+    const [toasts, setToasts] = useState<Toast[]>([]);
+
+    const showToast = (toastItem: Toast) => {
+        setToasts((prev) => [...prev, toastItem]);
+
+        setTimeout(() => {
+            setToasts((prev) => prev.filter((t) => t.id !== toastItem.id));
+        }, 3000);
+    };
+
+    useEffect(() => {
+        addToast = showToast;
+    }, []);
+
+    return (
+        <div className="fixed top-4 text-sm right-0 left-0 mx-auto w-fit z-50 flex flex-col gap-2">
+            {toasts.map((toastItem) => (
+                <div
+                    key={toastItem.id}
+                    className="px-4 flex items-center gap-2 backdrop-blur-2xl h-16 min-w-[300px] rounded-2xl shadow-md transition-transform bg-white/70 text-black"
+                >
+                    {toastItem.type === 'success' ? (
+                        <TickCircle className="size-5" color="green" />
+                    ) : toastItem.type === 'error' ? (
+                        <CloseCircle className="size-5" color="red" />
+                    ) : (
+                        <InfoCircle className="size-5" color="blue" />
+                    )}
+                    {toastItem.message}
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export const toast = (message: string | undefined, type: 'success' | 'error' | 'info' = 'info') => {
+    if (!message) return;
+    addToast({ id: `${Date.now()}-${Math.random()}`, message, type });
+};
+
+export default ToastContainer;