524 - initail changes, added Alumni tab, reusable components

src/components/TeamSection/Profile.tsx

@@ -14,10 +14,21 @@ type ProfileProps = {
   profilePic: string;
   alt: string;
   member: TeamMember;
-  isExec: boolean;
+  activeCategory: string;
 };
 
-
+const getBackgroundColor = (category: string): SocialMediaColor => {
+  switch (category) {
+    case 'executives':
+      return SocialMediaColor.ToggleGreen;
+    case 'projectManagers':
+      return SocialMediaColor.ToggleBlue;
+    case 'alumni':
+      return SocialMediaColor.ToggleYellow;
+    default:
+      return SocialMediaColor.ToggleBlue;
+  }
+}
 
 const Profile = (props: ProfileProps) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -39,14 +50,7 @@ const Profile = (props: ProfileProps) => {
         />
       </S.ProfileIconDiv>
 
-      <S.LinksSection
-
-        backgroundColor={
-          props.isExec
-            ? SocialMediaColor.ToggleGreen
-            : SocialMediaColor.ToggleBlue
-        }
-      >
+      <S.LinksSection backgroundColor={getBackgroundColor(props.activeCategory)}>
         <SocialMedia
           color={SocialMediaColor.White}
           icon={faLinkedinIn}

src/components/TeamSection/Team.tsx

@@ -2,27 +2,40 @@ import React from "react";
 import Profile from "./Profile";
 import * as S from "./Team.styles";
 import "./Team.styles.ts";
-import { type TeamMember } from "./TeamInformation";
-import { executiveTeam } from "./TeamInformation";
+import { type TeamMember, executiveTeam, projectManagers, alumniTeam } from "./TeamInformation";
 
 type TeamProps = {
   teamMembers: TeamMember[];
   desktopView: boolean;
-  isExec: boolean;
+  activeCategory: "executives" | "projectManagers" | "alumni";
 };
+
+const getBaseLength = (category: "executives" | "projectManagers" | "alumni") => {
+  switch (category) {
+    case "executives":
+      return executiveTeam.length;
+    case "projectManagers":
+      return projectManagers.length;
+    case "alumni":
+      return alumniTeam.length;
+    default:
+      return 0;
+  }
+};
+
 const Team = (props: TeamProps) => {
   return (
     <S.TeamContainer mobileView={!props.desktopView}>
       {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
       {props.teamMembers.map((member: TeamMember) => {
         return (
           <Profile
-            key={props.isExec ? member.id : member.id + executiveTeam.length}
+            key={member.id + getBaseLength(props.activeCategory)}
             member={member}
             profilePic={member.image}
             alt={member.image}
             mobileView={!props.desktopView}
-            isExec={props.isExec}
+            activeCategory={props.activeCategory}
           />
         );
       })}

src/components/TeamSection/TeamInformation.ts

@@ -37,6 +37,12 @@ export const projectManagers: TeamMember[] = teamData.projectManagers.map((pm, i
   image: importImage(pm.imagePath)
 }));
 
+export const alumniTeam: TeamMember[] = teamData.alumniTeam.map((alum, index) => ({
+  id: index,
+  ...alum,
+  image: importImage(alum.imagePath)
+}));
+
 export const boardMembers: TeamMember[] = teamData.boardMembers.map((bm, index) => ({
   id: index,
   ...bm,

src/components/TeamSection/TeamSection.styles.ts

@@ -1,5 +1,19 @@
 import styled from "styled-components/macro";
 
+// helper function 
+const getStylesForCategory = (category: "executives" | "projectManagers" | "alumni") => {
+  switch (category) {
+    case "executives":
+      return { backgroundColor: "rgb(77, 214, 168)", left: "5px" };
+    case "projectManagers":
+      return { backgroundColor: "rgb(97, 195, 212)", left: "calc(33.3% + 5px)" };
+    case "alumni":
+      return { backgroundColor: "#c9e265", left: "calc(66.6% + 5px)" };
+    default:
+      return { backgroundColor: "rgb(77, 214, 168)", left: "5px" }; // Default to executives
+  }
+};
+
 export const TeamSection = styled.div`
   padding: 5vw;
   margin-left: auto;
@@ -19,102 +33,56 @@ export const TeamSection = styled.div`
 `;
 
 export const ToggleButtonWrapper = styled.div`
+  display: flex;
   position: relative;
   margin-top: 2%;
   margin-left: -5%;
+  justify-content: center;
+  align-items: center;
 `;
 
-export const ToggleButtonLabel = styled.label`
-  overflow-y: hidden;
-  display: inline-block;
+export const SliderWrapper = styled.div<{ selectedCategory: "executives" | "projectManagers" | "alumni" }>`
   position: relative;
-  @media (min-width: 351px) and (max-width: 475px) {
-    width: 280px;
-    height: 40px;
-    margin-left: 0%;
-    margin-top: 5%;
-  }
-  @media (min-width: 320px) and (max-width: 350px) {
-    width: 280px;
-    height: 40px;
-    margin-left: 5%;
-    margin-top: -5%;
-  }
-  margin-left: 0%;
-  width: 425px;
-  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  width: 700px;
+  height: 60px;
+  background-color: ${({ selectedCategory }) =>
+    selectedCategory === "executives" ? "rgb(77, 214, 168)" :
+      selectedCategory === "projectManagers" ? "rgb(97, 195, 212)" :
+        "#c9e265"};
   border-radius: 50px;
-  background: #4dd6a8;
-  cursor: pointer;
-  &::after {
-    transform: translate(200px, -35px);
-    content: "";
-    display: block;
-    border-radius: 50px;
-    background-color: #49b893;
-    @media (min-width: 320px) and (max-width: 475px) {
-      width: 140px;
-      height: 30px;
-      margin-left: -65px;
-      margin-top: 23px;
-    }
-    width: 210px;
-    height: 40px;
-    margin-left: 10px;
-    margin-top: -57px;
-    box-shadow: 1px 3px 3px 1px rgba(0, 0, 0, 0.2);
-    transition: 0.8s;
-  }
-`;
-
-export const ToggleButton = styled.input`
-  opacity: 0;
-  z-index: 1;
-  border-radius: 15px;
-  width: 42px;
-  height: 26px;
-  &:checked + ${ToggleButtonLabel} {
-    background: #61c3d4;
-    &::after {
-      content: "";
-      border-radius: 50px;
-      background-color: #59acba;
-      width: 200px;
-      height: 40px;
-      @media (min-width: 320px) and (max-width: 475px) {
-        width: 130px;
-        height: 30px;
-        margin-left: 5px;
-        margin-top: 23px;
-      }
-      margin-left: 5px;
-      margin-top: -57px;
-      transition: 0.8s;
-      transform: translateY(-35px);
-    }
-  }
+  padding: 5px;
 `;
 
-export const TeamCategoryText = styled.p`
-  font-size: 1em;
-  margin-left: -20px;
-  font-family: "Inter", Tahoma, sans-serif;
-  color: white;
+export const SliderOption = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  cursor: pointer;
+  padding: 10px 5px;
   font-weight: 500;
-
-  @media (min-width: 320px) and (max-width: 475px) {
-    font-size: 0.65em;
-    color: white;
-  }
-`;
+  font-size: 1.5em;
+  color: #fff;
+  z-index: 2;
 
-export const Slider = styled.p`
-  font-size: 1em;
-  margin-left: 200px;
-  height: 24px;
-  @media (max-width: 475px) {
-    height: 0;
-    margin-top: -10px;
+  @media (max-width: 700px) {
+    font-size: 1.2em;
   }
-  font-weight: 500;
 `;
+
+export const SliderPosition = styled.div<{ selectedCategory: "executives" | "projectManagers" | "alumni" }>`
+  position: absolute;
+  top: 5px;
+  left: ${({ selectedCategory }) =>
+    getStylesForCategory(selectedCategory).left};
+  width: calc(33.3% - 10px);
+  height: calc(100% - 10px);
+  background-color: ${({ selectedCategory }) =>
+    getStylesForCategory(selectedCategory).backgroundColor};
+  border-radius: 50px;
+  box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 3px 3px;
+  transition: left 0.8s ease, background-color 0.2s ease-in-out;
+`;

src/components/TeamSection/TeamSection.tsx

@@ -1,39 +1,47 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { useState } from "react";
 import Team from "./Team";
 import * as S from "./TeamSection.styles";
-import { executiveTeam, projectManagers } from "./TeamInformation";
+import { executiveTeam, projectManagers, alumniTeam } from "./TeamInformation";
 
 type TeamSectionProps = {
   desktopView: boolean;
 };
 
 const TeamSection = (props: TeamSectionProps) => {
-  const [toggle, setToggled] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState<"executives" | "projectManagers" | "alumni">("executives");
 
-  const getTeamMembers = () => {
-    return toggle ? projectManagers : executiveTeam;
-  };
+  const getTeamMembers = useCallback(() => {
+    switch (selectedCategory) {
+      case "projectManagers":
+        return projectManagers;
+      case "alumni":
+        return alumniTeam;
+      default:
+        return executiveTeam;
+    }
+  }, [selectedCategory]);
 
   return (
     <S.TeamSection>
       <S.ToggleButtonWrapper>
-        <S.ToggleButton
-          id="checkbox"
-          type="checkbox"
-          onClick={() => setToggled(prev => !prev)}
-        />
-        <S.ToggleButtonLabel htmlFor="checkbox">
-          <S.TeamCategoryText>
-            Project Managers &emsp; &emsp; &emsp;&emsp;&emsp; Executives
-            <S.Slider></S.Slider>
-          </S.TeamCategoryText>
-        </S.ToggleButtonLabel>
+        <S.SliderWrapper selectedCategory={selectedCategory}>
+          <S.SliderPosition selectedCategory={selectedCategory} />
+          <S.SliderOption onClick={() => setSelectedCategory("executives")}>
+            Executives
+          </S.SliderOption>
+          <S.SliderOption onClick={() => setSelectedCategory("projectManagers")}>
+            Project Managers
+          </S.SliderOption>
+          <S.SliderOption onClick={() => setSelectedCategory("alumni")}>
+            Alumni
+          </S.SliderOption>
+        </S.SliderWrapper>
       </S.ToggleButtonWrapper>
       <Team
         teamMembers={getTeamMembers()}
         desktopView={props.desktopView}
-        isExec={!toggle}
+        activeCategory={selectedCategory}
       />
     </S.TeamSection>
   );

src/components/TeamSection/teamMembers.json

@@ -131,6 +131,20 @@
       "linkedin": "https://www.linkedin.com/in/ammerhamza/"
     }
   ],
+  "alumniTeam": [
+    {
+      "name": "Janita",
+      "affiliation": "Alumni VP Design",
+      "imagePath": "Janita.jpg",
+      "linkedin": "https://www.linkedin.com/in/janitamahum/"
+    },
+    {
+      "name": "Sajwal",
+      "affiliation": "Alumni VP Strategy",
+      "imagePath": "Sajwal.jpeg",
+      "linkedin": "https://www.linkedin.com/in/sajwal/"
+    }
+  ],
   "boardMembers": [
     {
       "name": "Niyousha Raeesinejad",

src/pages/TeamPage.tsx

@@ -70,7 +70,7 @@ const TeamPage = () => {
         <Team
           teamMembers={boardMembers}
           desktopView={defaultView}
-          isExec={true}
+          activeCategory = "executives"
         />
       </T.TeamSection>
       <TeamSection desktopView={defaultView} />

src/utility/SharedStyles.tsx

@@ -7,6 +7,7 @@ export enum SocialMediaColor {
   Black = "Black",
   ToggleGreen = "ToggleGreen",
   ToggleBlue = "ToggleBlue",
+  ToggleYellow = "ToggleYellow",
   White = "White",
 }
 
@@ -26,6 +27,8 @@ export const handleColor = (color: SocialMediaColor) => {
       return "var(--toggle-green)";
     case SocialMediaColor.ToggleBlue:
       return "var(--toggle-blue)";
+    case SocialMediaColor.ToggleYellow:
+      return "var(--secondary-lime)"
     case SocialMediaColor.White:
       return "white";
     default: