cr popup information method

1 files changed, 47 insertions, 14 deletions

diff --git a/src-migrate/modules/popup-information/index.tsx b/src-migrate/modules/popup-information/index.tsx
index 0d36f8e9..20afa902 100644
--- a/src-migrate/modules/popup-information/index.tsx
+++ b/src-migrate/modules/popup-information/index.tsx
@@ -1,33 +1,66 @@
 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';
 
-const PagePopupInformation = () => {
+const PagePopupInformation = ({data} : {data: any[]}) => {
   const router = useRouter();
   const isHomePage = router.pathname === '/';
   const auth = getAuth();
   const [active, setActive] = useState<boolean>(false);
+  // const [data, setData] = useState<any>(null);
 
   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);
+    //   }
+    // };
+
+    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 && (
+        <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}
+                sizes='(max-width: 768px) 100vw, 50vw'
+                priority={true}
+              />
+            </Link>
+          </div>
+        </Modal>
+      )}
     </div>
   );
 };
+export async function getServerSideProps() {
+  const res = await fetch(`/api/hero-banner?type=popup-banner`);
+  const { data } = await res.json();
+  return { props: { data } };
+}
+
 
 export default PagePopupInformation;