feat: Dropdown Selector for Awards Section

src/components/DropdownSelector/DropdownSelector.css

@@ -23,3 +23,10 @@
   right: 22%;
   cursor: pointer;
 }
+
+.content {
+  padding: 1rem;
+  /* margin-right: 0.05 rem; */
+  /*max-height: 90vh;
+  overflow-y: scroll;*/
+}

src/components/DropdownSelector/DropdownSelector.js

@@ -3,32 +3,43 @@ import { useLocation } from "react-router-dom";
 import "./DropdownSelector.css";
 
 // CONTACTS PAGE
-import contactsStyles from "../../styles/pages/contacts.module.css";
 import CurrentOfficeBearers from "../../pages/Contacts/CurrentOfficeBearers";
 import PreviousOfficeBearers from "../../pages/Contacts/PreviousOfficeBearers";
 import Staff from "../../pages/Contacts/Staff";
 
-export function DropdownSelector({ itemList }) {
+// AWARDS PAGE
+import "../../pages/Awards/Awards.css";
+import AwardSection from "../../pages/Awards/AwardSection";
+import HonourSection from "../../pages/Awards/HonourSection";
+
+const years = [
+  "2022-23",
+  "2021-22",
+  "2020-21",
+  "2019-20",
+  "2018-19",
+  "2017-18",
+  "2016-17",
+  "2015-16",
+];
+
+export function DropdownSelector({ itemList, defaultOption }) {
+  /**
+   * States
+   */
   // Option state
-  const [option, setOption] = useState("");
+  const [option, setOption] = useState(defaultOption);
+  // Awards states
+  const [year, setYear] = useState("2022-23");
 
-  // Update state variable values on the basis of path
+  /**
+   * Constants
+   */
   const location = useLocation();
-  useEffect(() => {
-    if (location.pathname === "/contacts") {
-      setOption("CURRENT OFFICE BEARERS");
-    } else if (location.pathname === "/contacts/cob") {
-      setOption("CURRENT OFFICE BEARERS");
-    } else if (location.pathname === "/contacts/staff") {
-      setOption("STAFF");
-    } else if (location.pathname === "/contacts/pob") {
-      setOption("PREVIOUS OFFICE BEARERS");
-    }
-  }, [location.pathname]);
 
   return (
     <div>
-      {/* Render Dropdown Menu */}
+      {/* Render Dropdown Selector */}
       <div className="dropdownSelector">
         <select
           value={option}
@@ -47,11 +58,37 @@ export function DropdownSelector({ itemList }) {
       {/* Render page content based on Selected option from Dropdown menu */}
 
       {/* CONTACTS PAGE */}
-      <div className={contactsStyles.content}>
-        {option === "CURRENT OFFICE BEARERS" && <CurrentOfficeBearers />}
-        {option === "PREVIOUS OFFICE BEARERS" && <PreviousOfficeBearers />}
-        {option === "STAFF" && <Staff />}
-      </div>
+      {location.pathname === "/contacts" && (
+        <div className="content">
+          {option === "CURRENT OFFICE BEARERS" && <CurrentOfficeBearers />}
+          {option === "PREVIOUS OFFICE BEARERS" && <PreviousOfficeBearers />}
+          {option === "STAFF" && <Staff />}
+        </div>
+      )}
+
+      {/* AWARDS PAGE */}
+      {location.pathname === "/awards" && (
+        <div className="content">
+          {/* Year Dropdown menu selector */}
+          <div className="select GC_dropdown gcSelector">
+            <select value={year} onChange={(e) => setYear(e.target.value)}>
+              {years.map((year) => (
+                <option key={year} value={year}>
+                  {year}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Awards Section */}
+          <AwardSection currentYear={year} currentTab={option} />
+
+          {/* Honour Section */}
+          {option !== "SPECIAL RECOGNITION" && (
+            <HonourSection currentYear={year} currentTab={option} />
+          )}
+        </div>
+      )}
     </div>
   );
 }

src/components/DropdownSelector/DropdownSelectorList.js

@@ -1,6 +1,12 @@
-
 export const contactsDropdownList = [
   "CURRENT OFFICE BEARERS",
   "STAFF",
   "PREVIOUS OFFICE BEARERS",
-];
+];
+
+export const awardsDropdownList = [
+  "SPORTS & GAMES",
+  "TECHNOLOGY",
+  "SOCIAL & CULTURAL",
+  "SPECIAL RECOGNITION",
+];

src/pages/Awards/AwardSection.js

@@ -0,0 +1,37 @@
+import awardsData from "./awardsData.json";
+import ContactCard from "../../components/ContactCard";
+
+export default function AwardSection({ currentYear, currentTab }) {
+  return (
+    <>
+      <h2 className="sectionHeading"> Awards </h2>
+      <div className="cards" data-aos="zoom-in-up">
+        {currentTab !== "specialRecog"
+          ? awardsData[currentYear][currentTab]["awards"]?.map(
+              (winner, index) => (
+                <ContactCard
+                  key={index}
+                  name={winner.Name}
+                  imgSrc={`data/media/images/awards/${winner.Image}`}
+                  designation={winner.Award}
+                  email={winner.email}
+                  facebook={winner.facebook}
+                  linkedin={winner.linkedin}
+                />
+              )
+            )
+          : awardsData[currentYear][currentTab].map((winner, index) => (
+              <ContactCard
+                key={index}
+                name={winner.Name}
+                imgSrc={`data/media/images/awards/${winner.Image}`}
+                designation={winner.Award}
+                email={winner.email}
+                facebook={winner.facebook}
+                linkedin={winner.linkedin}
+              />
+            ))}
+      </div>
+    </>
+  );
+}

src/pages/Awards/Awards.css

@@ -6,9 +6,16 @@
   font-family: "Lato", sans-serif;
 }
 
+.sectionHeading {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 3%;
+  align-items: center;
+  color: #fff;
+}
 .container {
   background-color: black;
-
   border-radius: 0.5rem;
   box-shadow: 0px 0.5rem 1rem rgba(0, 0, 0, 0.5);
   position: relative;

src/pages/Awards/Awards.js

@@ -1,169 +1,18 @@
-import { useState } from "react";
-import ContactCard from "../../components/ContactCard";
 import Layout from "../../components/Layouts/Layout";
-import awardsData from "./awardsData.json";
 import "./Awards.css";
+import {
+  DropdownSelector,
+  awardsDropdownList,
+} from "../../components/DropdownSelector";
 
-const years = [
-  "2022-23",
-  "2021-22",
-  "2020-21",
-  "2019-20",
-  "2018-19",
-  "2017-18",
-  "2016-17",
-  "2015-16",
-];
 function Awards() {
-  const [currentTab, setCurrentTab] = useState("socult");
-  const [currentYear, setCurrentYear] = useState("2022-23");
-
-  const handleTabChange = (s) => {
-    setCurrentTab(s);
-  };
-
   document.title = "Hall Of Fame | TSG";
 
   return (
     <Layout>
-      <h1>
-        <title>Hall of Fame</title>
-      </h1>
       <section className="awards content" data-aos="zoom-in-up">
         <h2 className="awards_h2">HALL OF FAME</h2>
-
-        <div className="tabs">
-          <div
-            className={`tab${currentTab === "socult" ? "active" : ""}`}
-            onClick={() => handleTabChange("socult")}
-            style={{ display: "flex", justifyContent: "center" }}
-          >
-            <button className="btn_interiit">Social &amp; Cultural</button>
-          </div>
-          <div
-            className={`tab${currentTab === "sports" ? "active" : ""}`}
-            onClick={() => handleTabChange("sports")}
-            style={{ display: "flex", justifyContent: "center" }}
-          >
-            <button className="btn_interiit">Sports &amp; Games</button>
-          </div>
-          <div
-            className={`tab${currentTab === "tech" ? "active" : ""}`}
-            onClick={() => handleTabChange("tech")}
-            style={{ display: "flex", justifyContent: "center" }}
-          >
-            <button className="btn_interiit">Technology</button>
-          </div>
-          {Object.keys(awardsData[currentYear]).length === 4 && (
-            <div
-              className={`tab${currentTab === "specialRecog" ? "active" : ""}`}
-              onClick={() => handleTabChange("specialRecog")}
-              style={{ display: "flex", justifyContent: "center" }}
-            >
-              <button className="btn_interiit">Special Recognition</button>
-            </div>
-          )}
-        </div>
-        <div className="select GC_dropdown">
-          <select
-            value={currentYear}
-            onChange={(e) => setCurrentYear(e.target.value)}
-          >
-            {years.map((year) => (
-              <option key={year} value={year}>
-                {year}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        {(awardsData[currentYear][currentTab]["awards"] !== undefined ||
-          currentTab === "specialRecog") && (
-          <>
-            <h2
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                justifyContent: "center",
-                padding: "3%",
-                alignItems: "center",
-                color: "#fff",
-              }}
-            >
-              {" "}
-              Awards{" "}
-            </h2>
-            <div className="cards" data-aos="zoom-in-up">
-              {currentTab !== "specialRecog"
-                ? awardsData[currentYear][currentTab]["awards"]?.map(
-                    (winner, index) => (
-                      <ContactCard
-                        key={index}
-                        name={winner.Name}
-                        imgSrc={`data/media/images/awards/${winner.Image}`}
-                        designation={winner.Award}
-                        email={winner.email}
-                        facebook={winner.facebook}
-                        linkedin={winner.linkedin}
-                      />
-                    )
-                  )
-                : awardsData[currentYear][currentTab].map((winner, index) => (
-                    <ContactCard
-                      key={index}
-                      name={winner.Name}
-                      imgSrc={`data/media/images/awards/${winner.Image}`}
-                      designation={winner.Award}
-                      email={winner.email}
-                      facebook={winner.facebook}
-                      linkedin={winner.linkedin}
-                    />
-                  ))}
-            </div>
-          </>
-        )}
-
-        {currentTab !== "specialRecog" && (
-          <>
-            <h2
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                justifyContent: "center",
-                padding: "3%",
-                alignItems: "center",
-                color: "#fff",
-              }}
-            >
-              {" "}
-              Honours{" "}
-            </h2>
-            <div className="table-container" data-aos="zoom-in-up">
-              <table>
-                <thead>
-                  <tr>
-                    <th>Name</th>
-                    <th>Roll No.</th>
-                    <th>Institute Award</th>
-                    {currentTab === "sports" && <th>Game</th>}
-                  </tr>
-                </thead>
-                <tbody>
-                  {awardsData[currentYear][currentTab]["honours"].map(
-                    (winner, index) => (
-                      <tr key={index}>
-                        <td>{winner.Name}</td>
-                        <td>{winner.Roll} </td>
-                        <td>{winner.Award}</td>
-                        {currentTab === "sports" && <td>{winner.Game}</td>}
-                      </tr>
-                    )
-                  )}
-                </tbody>
-              </table>
-            </div>
-          </>
-        )}
+        <DropdownSelector itemList={awardsDropdownList} defaultOption={"SPORTS & GAMES"} />
       </section>
     </Layout>
   );

src/pages/Awards/HonourSection.js

@@ -0,0 +1,33 @@
+import awardsData from "./awardsData.json";
+
+export default function HonourSection({ currentYear, currentTab }) {
+  return (
+    <>
+      <h2 className="sectionHeading"> Honours </h2>
+      <div className="table-container" data-aos="zoom-in-up">
+        <table>
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Roll No.</th>
+              <th>Institute Award</th>
+              {currentTab === "sports" && <th>Game</th>}
+            </tr>
+          </thead>
+          <tbody>
+            {awardsData[currentYear][currentTab]["honours"].map(
+              (winner, index) => (
+                <tr key={index}>
+                  <td>{winner.Name}</td>
+                  <td>{winner.Roll} </td>
+                  <td>{winner.Award}</td>
+                  {currentTab === "sports" && <td>{winner.Game}</td>}
+                </tr>
+              )
+            )}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+}