sweetmantech · sweetmantech · Jan 17, 2024 · Jan 11, 2024
diff --git a/components/LandingCard/LandingCard.tsx b/components/LandingCard/LandingCard.tsx
@@ -1,44 +1,45 @@
 import Image from "next/image"
-import Link from "next/link"
 import Icon from "../Core/Icon"
 
-const LandingCard = ({ title, img = "/images/Landing/web3.jpg", href }) => (
-  <Link href={href}>
-    <div className="p-[5px] md:p-2 border-[2px] border-gray_1 cursor-pointer font-dresden">
-      <div className="relative p-[10px] md:p-4 flex flex-col items-center justify-center border-darkgray border h-full">
-        <div className="absolute inset-0 z-0">
-          <Image
-            src={img}
-            alt={title}
-            layout="fill"
-            objectFit="cover"
-            objectPosition="center"
-            placeholder="blur"
-            blurDataURL={img}
-            unoptimized
-          />
-        </div>
-        <div className="absolute inset-0 bg-[black] opacity-[0.75]" />
-        <div className="absolute top-1 left-1 md:top-2 md:left-2 z-20">
-          <p className="text-[white] text-[10px] md:text-xs">CCTV 002</p>
-        </div>
-        <div className="absolute top-1 right-1 md:top-2 md:right-2 z-20 flex items-center">
-          <div className="w-2 h-2 md:w-3 md:h-3 bg-[red] rounded-full mr-2" />
-          <p className="text-[white] text-[10px] md:text-xs mr-2">REC</p>
-          <Icon name="wifi" raw size={16} color="white" />
-        </div>
-        <div className="absolute bottom-1 left-1 md:bottom-2 md:left-2 z-20">
-          <p className="text-[white] text-[10px] md:text-xs">DUR : 08:13:24:53</p>
-        </div>
-        <div className="absolute bottom-1 right-1 md:bottom-2 md:right-2 z-20">
-          <p className="text-[white] text-[10px] md:text-xs">2024/08/29 15:39:26</p>
-        </div>
-        <div className="relative z-10 p-2 md:p-6">
-          <h2 className="text-[white] text-[24px] md:text-5xl font-bold mb-2">{title}</h2>
-        </div>
+const LandingCard = ({ title, img = "/images/Landing/web3.jpg", onClick }) => (
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  <div
+    className="p-[5px] md:p-2 border-[2px] border-gray_1 cursor-pointer font-dresden"
+    onClick={onClick}
+  >
+    <div className="relative p-[10px] md:p-4 flex flex-col items-center justify-center border-darkgray border h-full">
+      <div className="absolute inset-0 z-0">
+        <Image
+          src={img}
+          alt={title}
+          layout="fill"
+          objectFit="cover"
+          objectPosition="center"
+          placeholder="blur"
+          blurDataURL={img}
+          unoptimized
+        />
+      </div>
+      <div className="absolute inset-0 bg-[black] opacity-[0.75]" />
+      <div className="absolute top-1 left-1 md:top-2 md:left-2 z-20">
+        <p className="text-[white] text-[10px] md:text-xs">CCTV 002</p>
+      </div>
+      <div className="absolute top-1 right-1 md:top-2 md:right-2 z-20 flex items-center">
+        <div className="w-2 h-2 md:w-3 md:h-3 bg-[red] rounded-full mr-2" />
+        <p className="text-[white] text-[10px] md:text-xs mr-2">REC</p>
+        <Icon name="wifi" raw size={16} color="white" />
+      </div>
+      <div className="absolute bottom-1 left-1 md:bottom-2 md:left-2 z-20">
+        <p className="text-[white] text-[10px] md:text-xs">DUR : 08:13:24:53</p>
+      </div>
+      <div className="absolute bottom-1 right-1 md:bottom-2 md:right-2 z-20">
+        <p className="text-[white] text-[10px] md:text-xs">2024/08/29 15:39:26</p>
+      </div>
+      <div className="relative z-10 p-2 md:p-6">
+        <h2 className="text-[white] text-[24px] md:text-5xl font-bold mb-2">{title}</h2>
       </div>
     </div>
-  </Link>
+  </div>
 )
 
 export default LandingCard
diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
@@ -2,10 +2,11 @@ import { useRouter } from "next/router"
 import Link from "next/link"
 import { usePopupWidget } from "../../providers/PopupWidgetProvider"
 import PopUpWindows from "../PopUpWindows/PopUpWindows"
+import { SCREENS } from "../../utils/screens"
 
 const Navbar = () => {
   const { pathname } = useRouter()
-  const { setIsOpenAbout, setIsOpenMusic, setIsOpenWeb3, setIsOpenPress } = usePopupWidget()
+  const { openPopUp } = usePopupWidget()
 
   const navClasses = `md:min-w-[80px] px-0 md:px-[10px] md:h-[40px] 
   text-[11px] md:text-[16px] md:py-[5px] py-[2px] h-fit uppercase md:capitalize
@@ -32,12 +33,12 @@ const Navbar = () => {
           className={`${navClasses}
         ${isAboutPage ? "border-b-[2px] border-b-[#347fdb] md:!bg-[#347fdb]" : ""}`}
           type="button"
-          onClick={() => setIsOpenAbout(true)}
+          onClick={() => openPopUp(SCREENS.ABOUT_SCREEN.screenName)}
         >
           About
         </button>
         <button
-          onClick={() => setIsOpenMusic(true)}
+          onClick={() => openPopUp(SCREENS.MUSIC_SCREEN.screenName)}
           type="button"
           className={`${navClasses}
         ${isMusicPage ? "border-b-[2px] border-b-[#347fdb] md:!bg-[#347fdb]" : ""}`}
@@ -48,13 +49,13 @@ const Navbar = () => {
           type="button"
           className={`${navClasses}
         ${isMintPage ? "border-b-[2px] border-b-[#347fdb] md:!bg-[#347fdb]" : ""}`}
-          onClick={() => setIsOpenWeb3(true)}
+          onClick={() => openPopUp(SCREENS.WEB3_SCREEN.screenName)}
         >
           Web3
         </button>
         <button
           type="button"
-          onClick={() => setIsOpenPress(true)}
+          onClick={() => openPopUp(SCREENS.PRESS_SCREEN.screenName)}
           className={`${navClasses}
         ${isPressPage ? "border-b-[2px] border-b-[#347fdb] md:!bg-[#347fdb]" : ""}`}
         >

diff --git a/components/Pages/LandingPage/LandingPage.tsx b/components/Pages/LandingPage/LandingPage.tsx
@@ -5,9 +5,12 @@ import SeoHead from "../../SeoHead"
 import LoadingPage from "../../LoadingPage"
 import useIsMobile from "../../../hooks/useIsMobile"
 import { usePageLoad } from "../../../providers/PageLoadProvider"
+import { SCREENS } from "../../../utils/screens"
+import { usePopupWidget } from "../../../providers/PopupWidgetProvider"
 
 const LandingPage = () => {
   const { entered, setEntered } = usePageLoad()
+  const { openPopUp } = usePopupWidget()
 
   const isMobile = useIsMobile()
 
@@ -30,10 +33,26 @@ const LandingPage = () => {
         className={`grid grid-cols-1 md:grid-cols-2 gap-y-[10px] md:gap-[20px] 
         h-[calc(100%-40px)] md:h-full ${!entered ? "hidden" : ""}`}
       >
-        <LandingCard title="ABOUT" img="/images/Landing/about.jpg" href="/about" />
-        <LandingCard title="MUSIC" img="/images/Landing/music.jpg" href="/music" />
-        <LandingCard title="WEB 3" img="/images/Landing/webThree.jpg" href="/web3" />
-        <LandingCard title="PRESS" img="/images/Landing/press.jpg" href="/press" />
+        <LandingCard
+          title="ABOUT"
+          img="/images/Landing/about.jpg"
+          onClick={() => openPopUp(SCREENS.ABOUT_SCREEN.screenName)}
+        />
+        <LandingCard
+          title="MUSIC"
+          img="/images/Landing/music.jpg"
+          onClick={() => openPopUp(SCREENS.MUSIC_SCREEN.screenName)}
+        />
+        <LandingCard
+          title="WEB 3"
+          img="/images/Landing/webThree.jpg"
+          onClick={() => openPopUp(SCREENS.WEB3_SCREEN.screenName)}
+        />
+        <LandingCard
+          title="PRESS"
+          img="/images/Landing/press.jpg"
+          onClick={() => openPopUp(SCREENS.PRESS_SCREEN.screenName)}
+        />
       </div>
       {isMobile && (
         <a

diff --git a/components/PopUpWindows/PopUpWindows.tsx b/components/PopUpWindows/PopUpWindows.tsx
@@ -1,58 +1,24 @@
 import { usePopupWidget } from "../../providers/PopupWidgetProvider"
 import DraggableModal from "../Core/DraggableModal"
-import AboutContent from "../Pages/AboutPage/AboutContent"
-import MintContent from "../Pages/MintPage/MintContent"
-import MusicContent from "../Pages/MusicPage/MusicContent"
-import PressContent from "../Pages/PressPage/PressContent"
+import { SCREENS } from "../../utils/screens"
 
 const PopUpWindows = () => {
-  const {
-    setIsOpenAbout,
-    isOpenAbout,
-    isOpenPress,
-    setIsOpenPress,
-    isOpenMusic,
-    setIsOpenMusic,
-    isOpenWeb3,
-    setIsOpenWeb3,
-  } = usePopupWidget()
+  const { openPopupStatus, openPopUp } = usePopupWidget()
+
   return (
     <>
-      {isOpenAbout && (
-        <DraggableModal
-          href="/about"
-          handleClose={() => setIsOpenAbout(false)}
-          isVisible={isOpenAbout}
-        >
-          <AboutContent />
-        </DraggableModal>
-      )}
-      {isOpenMusic && (
-        <DraggableModal
-          href="/music"
-          handleClose={() => setIsOpenMusic(false)}
-          isVisible={isOpenMusic}
-        >
-          <MusicContent isPopup />
-        </DraggableModal>
-      )}
-      {isOpenWeb3 && (
-        <DraggableModal
-          href="/mint"
-          handleClose={() => setIsOpenWeb3(false)}
-          isVisible={isOpenWeb3}
-        >
-          <MintContent />
-        </DraggableModal>
-      )}
-      {isOpenPress && (
-        <DraggableModal
-          href="/press"
-          handleClose={() => setIsOpenPress(false)}
-          isVisible={isOpenPress}
-        >
-          <PressContent />
-        </DraggableModal>
+      {Object.entries(SCREENS).map(
+        ([id, screen]) =>
+          openPopupStatus?.[screen.screenName] && (
+            <DraggableModal
+              href={screen.href}
+              handleClose={() => openPopUp(screen.screenName)}
+              isVisible={openPopupStatus[screen.screenName]}
+              key={id}
+            >
+              {screen.screen}
+            </DraggableModal>
+          ),
       )}
     </>
   )

diff --git a/providers/PopupWidgetProvider.tsx b/providers/PopupWidgetProvider.tsx
@@ -3,30 +3,23 @@ import { createContext, useContext, useMemo, useState } from "react"
 const PopupWidgetContext = createContext(null)
 
 const PopupWidgetProvider = ({ children }) => {
-  const [isOpenAbout, setIsOpenAbout] = useState(false)
-  const [isOpenMusic, setIsOpenMusic] = useState(false)
-  const [isOpenWeb3, setIsOpenWeb3] = useState(false)
-  const [isOpenPress, setIsOpenPress] = useState(false)
+  const [openPopupStatus, setOpenPopupState] = useState(null)
+
+  const openPopUp = (screenName) => {
+    let temp = {...openPopupStatus}
+
+    temp[screenName] = !temp[screenName]
+
+    setOpenPopupState({...temp})
+  }
 
   const value = useMemo(() => ({
-    isOpenAbout,
-    setIsOpenAbout,
-    isOpenMusic,
-    setIsOpenMusic,
-    isOpenWeb3,
-    setIsOpenWeb3,
-    isOpenPress,
-    setIsOpenPress
+    openPopupStatus,
+    openPopUp
   }), 
   [
-    isOpenAbout,
-    setIsOpenAbout,
-    isOpenMusic,
-    setIsOpenMusic,
-    isOpenWeb3,
-    setIsOpenWeb3,
-    isOpenPress,
-    setIsOpenPress
+    openPopUp,
+    openPopupStatus
   ])
 
   return <PopupWidgetContext.Provider value={value}>{children}</PopupWidgetContext.Provider>

diff --git a/utils/screens.tsx b/utils/screens.tsx
@@ -0,0 +1,27 @@
+import MusicContent from "../components/Pages/MusicPage/MusicContent";
+import AboutContent from "../components/Pages/AboutPage/AboutContent";
+import PressContent from "../components/Pages/PressPage/PressContent";
+import MintContent from "../components/Pages/MintPage/MintContent";
+
+export const SCREENS = {
+    ABOUT_SCREEN : {
+        screenName: "ABOUT_SCREEN",
+        href: "/about",
+        screen: <AboutContent />
+    },
+    MUSIC_SCREEN: {
+        screenName: "MUSIC_SCREEN",
+        href: "/music",
+        screen: <MusicContent />
+    },
+    WEB3_SCREEN: {
+        screenName: "WEB3_SCREEN",
+        href: "/mint",
+        screen: <MintContent />
+    },
+    PRESS_SCREEN: {
+        screenName: "PRESS_SCREEN",
+        href: "/press",
+        screen: <PressContent />
+    }
+}