Portal

components/Core/DraggableModal.tsx

@@ -21,7 +21,7 @@ const DraggableModal = ({ children, href, handleClose, isVisible = null }) => {
         absolute left-0 top-0 z-[1]"
           onClick={handleClose}
         />
-        <Draggable scale={1} bounds="parent">
+        <Draggable scale={1} bounds="parent" allowAnyClick={false} handle=".handle">
           <div className="w-[90%] md:w-[450px] h-[70%] md:h-[500px] relative z-[1000]">
             <motion.div
               className="flex flex-col bg-black
@@ -38,7 +38,7 @@ const DraggableModal = ({ children, href, handleClose, isVisible = null }) => {
                 duration: 0.2,
               }}
             >
-              <div className="flex justify-start pb-[10px] gap-x-[20px]">
+              <div className="handle flex justify-start pb-[10px] gap-x-[20px]">
                 <div className="flex items-center gap-x-[5px]">
                   <button type="button" onClick={handleClose} onTouchStart={handleClose}>
                     <Icon name="close" className="text-gray_1" size={20} raw />

components/Core/Icon/resolver.tsx

@@ -12,6 +12,7 @@ import {
 import { SlSocialSoundcloud } from "react-icons/sl"
 import { VscExpandAll } from "react-icons/vsc"
 import { IoMdClose } from "react-icons/io"
+import { MdArrowDropDown, MdArrowDropUp } from "react-icons/md"
 
 export const Icons = {
   bandcamp: FaBandcamp,
@@ -27,4 +28,6 @@ export const Icons = {
   twitter: FaTwitter,
   expand: VscExpandAll,
   close: IoMdClose,
+  arrowDown: MdArrowDropDown,
+  arrowUp: MdArrowDropUp,
 }

components/Layout/index.tsx

@@ -1,6 +1,7 @@
 import LoadingPage from "@/components/LoadingPage"
 import ContactProvider from "@/providers/ContactProvider"
 import { usePageLoad } from "@/providers/PageLoadProvider"
+import EmployeeProvider from "@/providers/EmployeeProvider"
 import BaseLayout from "./BaseLayout"
 import MobileLayout from "./MobileLayout"
 import { ILayout } from "./types"
@@ -20,7 +21,9 @@ function Layout({ children, type }: ILayoutFactory) {
 
   return (
     <ContactProvider>
-      {entered ? <Container>{children}</Container> : <LoadingPage />}
+      <EmployeeProvider>
+        {entered ? <Container>{children}</Container> : <LoadingPage />}
+      </EmployeeProvider>
     </ContactProvider>
   )
 }

components/Navbar/Navbar.tsx

@@ -9,7 +9,7 @@ const Navbar = () => {
   const { openPopUp } = usePopupWidget()
 
   const navClasses = `md:min-w-[80px] px-0 md:px-[10px] md:h-[40px]
-  text-[9.5px] md:text-[16px] md:py-[5px] py-[2px] h-fit uppercase
+  text-[7.5px] md:text-[16px] md:py-[5px] py-[2px] h-fit uppercase
   md:border-none bg-darkgray flex items-center justify-center text-gray_1 font-dresden cursor-pointer`
 
   const isHomePage = pathname === "/"
@@ -18,10 +18,11 @@ const Navbar = () => {
   const isWeb3Page = pathname.includes("/web3")
   const isPressPage = pathname.includes("/press")
   const isContactPage = pathname.includes("/contact")
+  const isEmployeePage = pathname.includes("/employee")
 
   return (
     <>
-      <div className="w-full grid grid-cols-6 md:flex gap-x-[5px] md:gap-x-[10px]">
+      <div className="w-full grid grid-cols-7 md:flex gap-x-[2px] md:gap-x-[10px]">
         <Link href="/">
           <div
             className={`${navClasses}
@@ -70,6 +71,14 @@ const Navbar = () => {
         >
           Contact
         </button>
+        <button
+          type="button"
+          onClick={() => openPopUp(SCREENS.EMPLOYEE_SCREEN.screenName)}
+          className={`${navClasses}
+        ${isEmployeePage ? "border-b-[2px] border-b-[#347fdb] md:!bg-[#347fdb]" : ""}`}
+        >
+          Employee
+        </button>
       </div>
       <PopUpWindows />
     </>

components/Pages/ContactPage/ContactContent.tsx

@@ -22,7 +22,7 @@ const ContactContent = ({ isPopup = false }) => {
           {screenStatus === SCREEN.INPUT_MODE && <ContactForm isPopup={isPopup} />}
           {screenStatus === SCREEN.SUCCESS && <ContactSuccess isPopup={isPopup} />}
         </div>
-        <RecBar />
+        <RecBar cctvNumber={5} />
       </div>
     </div>
   )

components/Pages/EmployeePage/EmployeeContent.tsx

@@ -0,0 +1,67 @@
+import Media from "@/components/Core/Media"
+import useClickOutsideSelect from "@/hooks/useClickOutsideSelect"
+import Icon from "@/components/Core/Icon"
+import { useEmployee } from "@/providers/EmployeeProvider"
+import { milestones } from "@/hooks/useEmployeeData"
+import RecBar from "../../RecBar"
+
+const EmployeeContent = ({ isPopup = false }) => {
+  const { selectRef, setIsVisibleSelect, isVisibleSelect } = useClickOutsideSelect()
+  const { selectedValue, setSelectedValue } = useEmployee()
+
+  const handleClick = (value) => {
+    setSelectedValue(value)
+    setIsVisibleSelect(!isVisibleSelect)
+  }
+
+  return (
+    <div className="p-[5px] md:p-[10px] border-[2px] border-gray_1 h-full">
+      <div
+        className="border-[1px] border-darkgray text-gray_1 font-dresden 
+              py-[25px] text-center
+              flex items-center justify-center text-[16px] relative h-full
+              text-[12px] md:text-[16px] relative"
+      >
+        <div
+          className="h-fit max-h-full text-[12px] md:text-[16px]
+              px-[15px] md:px-[20px] flex flex-col
+              flex flex-col items-center"
+        >
+          <Media
+            type="image"
+            link="/images/Landing/about.jpeg"
+            blurLink="/images/Landing/about.jpeg"
+            containerClasses={`${isPopup ? "w-[100px]" : "w-[150px] "} aspect-[4000/6016]`}
+          />
+          <p className="mt-2">Employee ID: heno.eth</p>
+          <p>Points: 111</p>
+          <div ref={selectRef} className="relative">
+            <button
+              type="button"
+              onClick={() => setIsVisibleSelect(!isVisibleSelect)}
+              className="border-[2px] px-3 py-1 rounded-sm flex items-center"
+            >
+              {selectedValue}
+              <Icon name={`${isVisibleSelect ? "arrowUp" : "arrowDown"}`} raw />
+            </button>
+            {isVisibleSelect && (
+              <div
+                className="absolute left-0 top-full z-[100] border-[2px]
+                        w-full gap-2 rounded-sm space-y-2 py-1 bg-black"
+              >
+                {milestones.map((milestone) => (
+                  <button type="button" onClick={() => handleClick(milestone)} key={milestone}>
+                    {milestone}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+        <RecBar cctvNumber={6} />
+      </div>
+    </div>
+  )
+}
+
+export default EmployeeContent

components/Pages/EmployeePage/EmployeePage.tsx

@@ -0,0 +1,17 @@
+import useIsMobile from "@/hooks/useIsMobile"
+import Layout from "../../Layout"
+import SeoHead from "../../SeoHead"
+import EmployeeContent from "./EmployeeContent"
+
+const EmployeePage = () => {
+  const isMobile = useIsMobile()
+
+  return (
+    <Layout type={isMobile ? "mobile" : "base"}>
+      <SeoHead title="HENO. Contact" image="/images/Landing/web3.jpeg" />
+      <EmployeeContent />
+    </Layout>
+  )
+}
+
+export default EmployeePage

components/Pages/EmployeePage/index.tsx

@@ -0,0 +1,3 @@
+import EmployeePage from "./EmployeePage"
+
+export default EmployeePage

hooks/useClickOutsideSelect.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useRef, useState } from "react"
+
+const useClickOutsideSelect = () => {
+  const selectRef = useRef() as any
+  const [isVisibleSelect, setIsVisibleSelect] = useState(false)
+
+  useEffect(() => {
+    const handleClose = (e) => {
+      if (selectRef.current && !selectRef.current.contains(e.target)) setIsVisibleSelect(false)
+    }
+
+    document.addEventListener("mousedown", handleClose)
+    document.addEventListener("touchstart", handleClose)
+
+    return () => {
+      document.removeEventListener("mousedown", handleClose)
+      document.removeEventListener("touchstart", handleClose)
+    }
+  }, [selectRef])
+
+  return {
+    isVisibleSelect,
+    setIsVisibleSelect,
+    selectRef,
+  }
+}
+
+export default useClickOutsideSelect

hooks/useEmployeeData.tsx

@@ -0,0 +1,14 @@
+import { useState } from "react"
+
+export const milestones = ["#Milestone 1", "#Milestone 2", "#Milestone 3"]
+
+const useEmployeeData = () => {
+  const [selectedValue, setSelectedValue] = useState(milestones[0])
+
+  return {
+    setSelectedValue,
+    selectedValue,
+  }
+}
+
+export default useEmployeeData

lib/screens.tsx

@@ -1,3 +1,4 @@
+import EmployeeContent from "@/components/Pages/EmployeePage/EmployeeContent"
 import MusicContent from "../components/Pages/MusicPage/MusicContent"
 import AboutContent from "../components/Pages/AboutPage/AboutContent"
 import PressContent from "../components/Pages/PressPage/PressContent"
@@ -30,4 +31,9 @@ export const SCREENS = {
     href: "/contact",
     screen: <ContactContent isPopup />,
   },
+  EMPLOYEE_SCREEN: {
+    screenName: "EMPLOYEE_SCREEN",
+    href: "/employee",
+    screen: <EmployeeContent isPopup />,
+  },
 }

pages/employee/index.tsx

@@ -0,0 +1,5 @@
+import EmployeePage from "@/components/Pages/EmployeePage"
+
+const Employee = () => <EmployeePage />
+
+export default Employee

providers/EmployeeProvider.tsx

@@ -0,0 +1,27 @@
+import { createContext, useContext, useMemo } from "react"
+import useEmployeeData from "@/hooks/useEmployeeData"
+
+const EmployeeContext = createContext(null)
+
+const EmployeeProvider = ({ children }) => {
+  const employeeData = useEmployeeData()
+
+  const value = useMemo(
+    () => ({
+      ...employeeData,
+    }),
+    [employeeData],
+  )
+
+  return <EmployeeContext.Provider value={value}>{children}</EmployeeContext.Provider>
+}
+
+export const useEmployee = () => {
+  const context = useContext(EmployeeContext)
+  if (!context) {
+    throw new Error("useEmployee must be used within a EmployeeProvider")
+  }
+  return context
+}
+
+export default EmployeeProvider