1 files changed, 45 insertions, 13 deletions
diff --git a/src-migrate/modules/popup-information/index.tsx b/src-migrate/modules/popup-information/index.tsx
index 0d36f8e9..d50711cc 100644
--- a/src-migrate/modules/popup-information/index.tsx
+++ b/src-migrate/modules/popup-information/index.tsx
@@ -1,31 +1,63 @@
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
-import { Modal } from "~/components/ui/modal";
+import Image from 'next/image';
+import Link from 'next/link';
+import { Modal } from '~/components/ui/modal';
 import { getAuth } from '~/libs/auth';
-import PageContent from '../page-content';
+import dynamic from 'next/dynamic';
 
 const PagePopupInformation = () => {
   const router = useRouter();
   const isHomePage = router.pathname === '/';
   const auth = getAuth();
   const [active, setActive] = useState<boolean>(false);
+  const [data, setData] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+
 
   useEffect(() => {
-    if (isHomePage && !auth) setActive(true);
+    const getData = async () => {
+      const res = await fetch(`/api/hero-banner?type=popup-banner`);
+      const { data } = await res.json();
+      if (data) {
+        setData(data);
+      }
+      setLoading(false);
+    };
+
+    if (isHomePage && !auth) {
+      setActive(true);
+      getData();
+    }
   }, [isHomePage, auth]);
   return (
     <div className='group'>
-      <Modal
-        active={active}
-        className='!w-fit !bg-transparent !border-none overflow-hidden'
-        close={() => setActive(false)}
-        mode='desktop'
-      >
-        <div className='w-[350px] md:w-[530px]' onClick={() => setActive(false)}>
-          <PageContent path='/onbording-popup' />
-        </div>
-      </Modal>
+      {data && !loading && (
+        <Modal
+          active={active}
+          className='!w-fit !bg-transparent !border-none overflow-hidden'
+          close={() => setActive(false)}
+          mode='desktop'
+        >
+          <div
+            className='w-[350px] md:w-[530px]'
+            onClick={() => setActive(false)}
+          >
+            <Link href={data[0].url === false ? '/' :data[0].url} aria-label='popup'>
+              <Image
+                src={data[0]?.image}
+                alt={data[0]?.name}
+                width={1152}
+                height={768}
+                loading='eager'
+                sizes='(max-width: 768px) 100vw, 50vw'
+                priority={true}
+              />
+            </Link>
+          </div>
+        </Modal>
+      )}
     </div>
   );
 };