Merge pull request #13 from CATISNOTSODIUM/pop-up-sign-in

Add popup handler

src/app/page.tsx

@@ -4,7 +4,7 @@ import NavBar from "@/components/Navbar";
 import Footer from "@/components/Footer"
 import Link from "next/link";
 import { JobData, JobDataType } from "@/lib/positions/job-data";
-import { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import Image from "next/image";
 import excoPic from "@/app/components/landing_page/Fintech_Exco.png";
 
@@ -16,7 +16,10 @@ export default function JobApplication() {
   const [rolePerPage, setRolePerPage] = useState(MIN_ROLE_PER_PAGE);
   const [selectedDepartment, setSelectedDepartment] = useState("All");
 
-  const handleDepartmentChange = (event) => {
+  // Handling sign in popup
+  const isSignIn = false; // TODO
+  const [isPopup, setIsPopup] = useState(false);
+  const handleDepartmentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSelectedDepartment(event.target.value);
   };
 
@@ -58,7 +61,7 @@ export default function JobApplication() {
       <div>
         {
           filteredRoutes.slice(0, rolePerPage).map((jobPosition) => (
-            <JobCard key={jobPosition} route={jobPosition} />
+            <JobCard key={jobPosition} route={jobPosition} isSignIn={isSignIn} popupHandler={setIsPopup}/>
           ))
         }
       </div>
@@ -83,17 +86,47 @@ export default function JobApplication() {
         </button>
       </div>}
       <Footer/>
+      {isPopup && <SignInModal isPopup={isPopup} popupHandler={setIsPopup}/>}
     </div>
   );
 }
 
+
+function SignInModal(props: SignInModalProps) {
+  const setIsPopup = props.popupHandler;
+  return (
+    <div className="fixed flex flex-col items-center text-center justify-center px-10 py-10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white w-1/5 min-w-72 h-1/2 rounded-lg shadow-2xl">
+      <button className="absolute text-white font-3xl px-2.5 py-1 bg-black hover:bg-gray-300 rounded-full top-6 right-6"
+        onClick={() => {setIsPopup(false)}}
+      >
+        &#x2716; {/* X Close Button*/}
+      </button>
+      <h3 className="font-header my-10 font-bold text-button-orange">
+        Please sign in to apply!
+      </h3>
+      <Link href="/signin">
+      <button className="bg-button-orange max-w-48 text-white rounded-full px-10 py-2 font-header font-bold">
+        Sign in
+      </button>
+      </Link>
+    </div>
+  )
+}
+
 function JobCard(props: JobCardProps) {
   const route = props.route;
+  const isSignIn = props.isSignIn;
+  const setIsPopup = props.popupHandler;
   const jobData: JobDataType = JobData[route];
   const position = 0; // FIX:  replace this value
   return (
     <div key={route} className="bg-[#012665] text-white rounded-md px-3 py-3 my-2">
-      <Link href = {`/positions/${route}`}>
+      {/*Handling click*/}
+      <Link onClick={() => {return !isSignIn && setIsPopup(true);}}
+        href = {isSignIn ? `/positions/${route}` : "#"} // redirect to signin page
+        scroll={isSignIn} // Prevent scrolling when popup shows up
+      >
+      {/*content*/}
       <div className="flex justify-between">
         <div className="flex flex-col justify-center ml-[5%]">
           <div className="text-2xl font-bold mb-1">{jobData.title}</div>
@@ -114,6 +147,16 @@ function JobCard(props: JobCardProps) {
   )
 }
 
+
+interface SignInModalProps {
+  isPopup: boolean;
+  popupHandler: Dispatch<SetStateAction<boolean>>;
+}
+
 interface JobCardProps {
   route: string;
+  isSignIn: boolean;
+  popupHandler: Dispatch<SetStateAction<boolean>>;
 }
+
+