Ak/migration officer modal (#286)

* finished officer modals

* added missing files

* changed modal to apply to entire officer card

* Change title font

* Merge main

---------

Co-authored-by: Aditi Kumar <[email protected]>

src/components/OfficerCard.js

@@ -1,14 +1,30 @@
 import styles from "@/styles/OfficerCard.module.css";
+import OfficerModal from "@/components/OfficerModal.js";
+import {useState} from "react";
+
+export default function OfficerCard({name, position, netid, officer}) {
+  const [show, setShow] = useState(false);
+
+  const openModal = () => {
+    setShow(true);
+  };
+
+  const closeModal = () => {
+    setShow(false);
+  };
 
-export default function OfficerCard({ name, position, img, netid }) {
   return (
-    <div className={`${styles.container}`}>
-      <img
-        className={`${styles.img}`}
-        src={`/assets/img/officers/${netid}.jpg`}
-      ></img>
-      <h2 className={`${styles.name}`}>{name}</h2>
-      <p className={`${styles.position}`}>{position}</p>
-    </div>
+    <>
+      <div className={`${styles.container}`} onClick={openModal}>
+        <img
+          className={`${styles.img}`}
+          src={`/assets/img/officers/${netid}.jpg`}
+        ></img>
+        <h2 className={`${styles.name}`}>{name}</h2>
+        <p className={`${styles.position}`}>{position}</p>
+      </div>
+
+      <OfficerModal isOpen={show} closeModal={closeModal} officer={officer} />
+    </>
   );
 }

src/components/OfficerModal.js

@@ -0,0 +1,63 @@
+import ComputerWindow from "./ComputerWindow";
+import styles from "@/styles/OfficerModal.module.css";
+
+export default function OfficerModal({isOpen, closeModal, officer}) {
+    return isOpen ? OfficerInformation(closeModal, officer) : null;
+}
+
+function OfficerInformation(
+  closeModal,
+  officer
+) {
+  return (
+    <>
+      <div className={styles.container}>
+        <ComputerWindow className={styles.window} topbarColor="#D2616C">
+          <div className={styles.officerInfo}>
+            <h3 className={styles.title}>{officer.name} - {officer.position}</h3>
+
+            <div className="columnContainer">
+                <div className={styles.left}>
+                    <img
+                        className={`${styles.photo}`}
+                        src={`/assets/img/officers/${officer.netid}.jpg`}
+                    ></img>
+                </div>
+
+                <div className={styles.right}>
+                <p><b>Major:</b> {officer.major}</p>
+                <p><b>Year:</b> {officer.year}</p>
+                <p><b>From:</b> {officer.place}</p>
+                <p><b>Involvements:</b> {officer.involvements}</p>
+                <p><b>Interests:</b> {officer.interests}</p>
+                <p><b>Hobbies:</b> {officer.hobbies}</p>
+                <p><b>Fun Fact:</b> {officer.fact}</p>
+                <p><b>Advice:</b> {officer.advice}</p>
+                <br></br>
+
+                <a href={officer.email}>
+                    <img
+                        className={`${styles.socials}`}
+                        src="assets/img/logos/contacts/email.png"
+                    ></img>
+                </a>
+                <a href={officer.linkedin}>
+                    <img
+                        className={`${styles.socials}`}
+                        src="assets/img/logos/contacts/linkedin.png"
+                    ></img>
+                </a>
+
+                </div>
+
+            </div>
+
+          </div>
+          <button onClick={closeModal} className={styles.closeButton}>
+            Close
+          </button>
+        </ComputerWindow>
+      </div>
+    </>
+  );
+}

src/pages/officers.js

@@ -7,16 +7,17 @@ export default function Officers({children}) {
   return (
     <div className={`${styles.main}`}>
       <h1 className={`${styles.officers}`}>WCS Officer Board</h1>
-      {/* <p className={`${styles.description}`}>
+      <p className={`${styles.description}`}>
         Click on a photo to learn more about our officers!
-      </p> */}
+      </p>
       <div className={`${styles.cards}`}>
         {officerData.admin.map((officer, index) => (
           <OfficerCard
             key={index}
             name={officer.name}
             position={officer.position}
             netid={officer.netid}
+            officer={officer}
           ></OfficerCard>
         ))}
       </div>

src/styles/OfficerCard.module.css

@@ -10,6 +10,7 @@
   justify-content: space-between;
   padding: 2rem;
   margin: 1rem;
+  cursor: pointer;
 }
 
 .img {

src/styles/OfficerModal.module.css

@@ -0,0 +1,92 @@
+.closeButton {
+  width: 100%;
+  height: 3rem;
+  border: none;
+  color: #21636c;
+  background-color: #e9e1e6;
+  font-weight: 700;
+  font-size: 16px;
+}
+
+.columnContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  gap: 2rem;
+}
+
+.container {
+  width: 100svw;
+  height: 100svh;
+  position: fixed;
+  inset: 0;
+  z-index: 999;
+  background-color: rgba(10, 10, 10, 0.6);
+}
+
+.officerInfo {
+  padding: 1rem 5svw 1rem 5svw;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  max-height: 85svh;
+  overflow-y: auto;
+}
+
+.officerInfo .left {
+  width: calc(50% - 10px);
+  padding: 10px;
+  box-sizing: border-box;
+  float: left;
+}
+
+.officerInfo .right {
+  width: calc(50% - 10px);
+  padding: 10px;
+  box-sizing: border-box;
+  float: right;
+  text-align: left;
+}
+
+@media (max-width: 767px) {
+  .officerInfo .left,
+  .officerInfo .right {
+    width: 100%;
+  }
+}
+
+.photo {
+  border: 6px solid #65c7cc;
+  border-radius: 10%;
+  height: 400px;
+  width: 400px;
+  object-fit: cover;
+  max-width: 100%;
+}
+
+.socials {
+  height: 100px;
+  width: 100px;
+  margin: 1%;
+  object-fit: cover;
+  max-width: 100%;
+  float: right;
+}
+
+.title {
+  font-family: "Audiowide" !important;
+  margin-bottom: 1rem;
+  font-size: 36px;
+  font-weight: 400;
+  color: #65c7cc;
+}
+
+.window {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 90svw;
+  width: max-content;
+}