Refactor: Update Layout component to display a toast notification for network maintenance

src/layout/index.tsx

@@ -6,6 +6,7 @@ import { Helmet } from "react-helmet-async";
 import { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { setConfigId } from "../redux/slices/configId";
+import toast from "react-hot-toast";
 
 const Layout = () => {
   const { configs } = useParams<{ configs: string }>();
@@ -23,8 +24,48 @@ const Layout = () => {
           console.error("Element with ID 'configs' not found");
         }
       }, 100); // Scroll to 100% of the page height
-  }, [configs,dispatch]);
+  }, [configs, dispatch]);
 
+  useEffect(() => {
+    toast.custom(
+      (t) => (
+        <div
+          className="!bg-gray-900 s!hadow-2xl !shadow-gray-700/20 !text-white !p-4 !rounded-lg !relative !flex !flex-col !gap-2 !justify-center !items-center !max-w-[600px] !w-full"
+        >
+          <div>
+            کاربر عزیز درودبه اطلاع می‌رسانیم به علت عملیات توسعه و نگهداری شبکه
+            شاپرک از ساعت ۲۳ روز ۲۵ شهریور الی ۶ بامداد مورخ ۲۶ شهریور احتمال
+            اختلال و قطعی در درگاه پرداخت اینترنتی وجود دارد. خواهشمندیم عملیات
+            پرداخت را قبل و یا بعد از این زمان انجام دهید یا با مراجعه به
+            پشتیبانی تلگرام به نشانی{" "}
+            <a
+              href="https://t.me/PersianPingSupport"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: "cyan" }}
+            >
+              PersianPingSupport
+            </a>{" "}
+            از طریق کارت به کارت سرویس خود را خریداری کنید
+          </div>
+          <button
+            onClick={() => toast.dismiss(t.id)} // بستن توست با کلیک کاربر
+            style={{
+              background: "red",
+              color: "white",
+              padding: "8px 12px",
+              borderRadius: "4px",
+              marginLeft: "16px",
+              cursor: "pointer",
+            }}
+          >
+            باشه
+          </button>
+        </div>
+      ),
+      { position: "bottom-center", duration: Infinity }
+    );
+  }, []);
   return (
     <>
       <Helmet>