Refactor: Update Layout component to display a toast notification for network maintenance
This commit is contained in:
@@ -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 }>();
|
||||
@@ -25,6 +26,46 @@ const Layout = () => {
|
||||
}, 100); // Scroll to 100% of the page height
|
||||
}, [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>
|
||||
|
||||
Reference in New Issue
Block a user