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
@@ -42,13 +53,7 @@ const Profile = (props: ProfileProps) => {
  )}
 
  {props.member.linkedin && (
- <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,42 @@ 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";
+
+export type TeamCategory = "executives" | "projectManagers" | "alumni";
 
 type TeamProps = {
  teamMembers: TeamMember[];
  desktopView: boolean;
- isExec: boolean;
+ activeCategory: TeamCategory;
+};
+
+const getBaseLength = (category: TeamCategory) => {
+ 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

@@ -47,6 +47,12 @@ export const projectManagers: TeamMember[] = teamData.projectManagers?.length ?
  linkedin: ""
  }];
 
+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,4 +1,19 @@
 import styled from "styled-components/macro";
+import { TeamCategory } from "./Team";
+
+// helper function 
+const getStylesForCategory = (category: TeamCategory) => {
+ switch (category) {
+ case "executives":
+ return { backgroundColor: "var(--primary-green)", left: "5px" };
+ case "projectManagers":
+ return { backgroundColor: "var(--lightwash-green)", left: "calc(33.3% + 5px)" };
+ case "alumni":
+ return { backgroundColor: "var(--secondary-lime)", left: "calc(66.6% + 5px)" };
+ default:
+ return { backgroundColor: "var(--primary-green)", left: "5px" }; // Default to executives
+ }
+};
 
 export const TeamSection = styled.div`
  padding: 5vw;
@@ -19,102 +34,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: TeamCategory}>`
  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" ? "var(--primary-green)" :
+ selectedCategory === "projectManagers" ? "var(--lightwash-green)" :
+ "var(--secondary-lime)"};
  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: TeamCategory }>`
+ 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,48 @@
-import React from "react";
+import React, { useMemo } 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";
+import { TeamCategory } from "./Team";
 
 type TeamSectionProps = {
  desktopView: boolean;
 };
 
 const TeamSection = (props: TeamSectionProps) => {
- const [toggle, setToggled] = useState(false);
+ const [selectedCategory, setSelectedCategory] = useState<TeamCategory>("executives");
 
- const getTeamMembers = () => {
- return toggle ? projectManagers : executiveTeam;
- };
+ const getTeamMembers = useMemo(() => {
+ 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()}
+ teamMembers={getTeamMembers}
  desktopView={props.desktopView}
- isExec={!toggle}
+ activeCategory={selectedCategory}
  />
  </S.TeamSection>
  );

src/components/TeamSection/teamMembers.json

@@ -94,6 +94,20 @@
  }
  ],
  "projectManagers": [],
+ "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: