diff --git a/src/components/PreviousExecTeam/PreviousExecTeam.styles.ts b/src/components/PreviousExecTeam/PreviousExecTeam.styles.ts index d8b915b..dfc474b 100644 --- a/src/components/PreviousExecTeam/PreviousExecTeam.styles.ts +++ b/src/components/PreviousExecTeam/PreviousExecTeam.styles.ts @@ -65,19 +65,19 @@ export const YearButton = styled.button` } `; -export const Divider = styled.hr` - width: 60%; - text-align: center; +export const Carousel = styled.div` + width: 40%; margin: 3rem auto; - /* border-top: 0.08rem solid red; */ - border: none; + @media(max-width: 768px) { + width: 80%; + } `; export const TeamList = styled.div` - max-width: 60%; + max-width: 85%; margin: 0 auto; display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(3, 1fr); gap: 2rem; @media (max-width: 768px) { @@ -87,13 +87,13 @@ export const TeamList = styled.div` export const TeamMember = styled.div<{ lastRow: boolean }>` padding-bottom: 2rem; - ${ - // if we are are not on the last row, add border to the bottom - ({ lastRow }) => - !lastRow && - ` + // if we are are not on the last row, add border to the bottom + ({ lastRow }) => + !lastRow && + ` border-bottom: #8d8d8d 0.08rem solid; + ` } `; diff --git a/src/components/PreviousExecTeam/PreviousExecTeam.tsx b/src/components/PreviousExecTeam/PreviousExecTeam.tsx index cec372e..d917264 100644 --- a/src/components/PreviousExecTeam/PreviousExecTeam.tsx +++ b/src/components/PreviousExecTeam/PreviousExecTeam.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; import * as S from "./PreviousExecTeam.styles"; -import prevTeamsData from "./PreviousExecTeamsInfo.json"; +import {prevExecTeamList, PrevExecTeam} from "./PreviousExecTeamsInfo"; // https://react-slick.neostack.com/docs/example/ import Divider from "components/Divider"; import { @@ -9,61 +9,49 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -interface yearData { - year: string; - members: prevMembers[]; -} -interface prevMembers { - name: string; - role: string; - linkedin_url: string; -} -const VISIBLE_YEARS_DESKTOP = 1; -const VISIBLE_YEARS_MOBILE = 1; + +const PAGINATION_VISIBLE_YEARS = 1; // interface of the prop interface PreviousExecTeamProps { desktopView: boolean; } -const PreviousExecTeam = (props: PreviousExecTeamProps) => { - const [selectedYear, setSelectedYear] = useState(prevTeamsData[prevTeamsData.length - 1].year); - const [visibleYears, setVisibleYears] = useState([]); - +const PreviousExecTeam = ({desktopView} : PreviousExecTeamProps) => { + const [selectedYear, setSelectedYear] = useState(prevExecTeamList[prevExecTeamList.length - 1].year); + const [visibleYears, setVisibleYears] = useState([]); + useEffect(() => { updateVisibleYears(); - }, [props.desktopView]); // only run on inital render or when view changes + }, [desktopView]); // only run on inital render or when view changes // Function to set the visible years function updateVisibleYears() { const selectedYearIndex = getSelectedYearIndex(); - const numOfVisibleYears = props.desktopView - ? VISIBLE_YEARS_DESKTOP - : VISIBLE_YEARS_MOBILE; // Calculate startIndex based on the selectedYearIndex - let startIndex = Math.max(0, prevTeamsData.length - numOfVisibleYears); + let startIndex = Math.max(0, prevExecTeamList.length - PAGINATION_VISIBLE_YEARS); // If the selected year is near the beginning, adjust startIndex to show available years if (selectedYearIndex < startIndex) { - startIndex = Math.max(0,selectedYearIndex - Math.floor(numOfVisibleYears / 2)); + startIndex = Math.max(0,selectedYearIndex - Math.floor(PAGINATION_VISIBLE_YEARS / 2)); } // Calculate endIndex based on startIndex - const endIndex = Math.min(prevTeamsData.length,startIndex + numOfVisibleYears); + const endIndex = Math.min(prevExecTeamList.length,startIndex + PAGINATION_VISIBLE_YEARS); - setVisibleYears(prevTeamsData.slice(startIndex, endIndex)); + setVisibleYears(prevExecTeamList.slice(startIndex, endIndex)); } const getSelectedYearIndex = (): number => - prevTeamsData.findIndex((data) => data.year === selectedYear); + prevExecTeamList.findIndex((data) => data.year === selectedYear); const handleLeftArrow = () => { const selectedYearIndex = getSelectedYearIndex(); if (selectedYearIndex > 0) { - setSelectedYear(prevTeamsData[selectedYearIndex - 1].year); + setSelectedYear(prevExecTeamList[selectedYearIndex - 1].year); // Recalculate visible years only if necessary - const currentStartIndex = prevTeamsData.findIndex( + const currentStartIndex = prevExecTeamList.findIndex( (data) => data.year === visibleYears[0].year ); @@ -72,39 +60,35 @@ const PreviousExecTeam = (props: PreviousExecTeamProps) => { // Only shift the visible years by 1 year to the left so we don't introduce any unnecssary years const newStartIndex = Math.max(0, currentStartIndex - 1); const newEndIndex = Math.min( - prevTeamsData.length, - newStartIndex + - (props.desktopView ? VISIBLE_YEARS_DESKTOP : VISIBLE_YEARS_MOBILE) + prevExecTeamList.length, + newStartIndex + PAGINATION_VISIBLE_YEARS ); - setVisibleYears(prevTeamsData.slice(newStartIndex, newEndIndex)); + setVisibleYears(prevExecTeamList.slice(newStartIndex, newEndIndex)); } } }; const handleRightArrow = () => { const selectedYearIndex = getSelectedYearIndex(); - if (selectedYearIndex < prevTeamsData.length - 1) { - setSelectedYear(prevTeamsData[selectedYearIndex + 1].year); + if (selectedYearIndex < prevExecTeamList.length - 1) { + setSelectedYear(prevExecTeamList[selectedYearIndex + 1].year); // Recalculate visible years only if necessary - const currentStartIndex = prevTeamsData.findIndex( + const currentStartIndex = prevExecTeamList.findIndex( (data) => data.year === visibleYears[0].year ); - const numOfVisibleYears = props.desktopView - ? VISIBLE_YEARS_DESKTOP - : VISIBLE_YEARS_MOBILE; // If the selected year moves beyond the currently visible years - if (selectedYearIndex + 1 >= currentStartIndex + numOfVisibleYears) { + if (selectedYearIndex + 1 >= currentStartIndex + PAGINATION_VISIBLE_YEARS) { // Shift the visible years by one to the right const newStartIndex = Math.min( - prevTeamsData.length - numOfVisibleYears, + prevExecTeamList.length - PAGINATION_VISIBLE_YEARS, currentStartIndex + 1 ); const newEndIndex = Math.min( - prevTeamsData.length, - newStartIndex + numOfVisibleYears + prevExecTeamList.length, + newStartIndex + PAGINATION_VISIBLE_YEARS ); - setVisibleYears(prevTeamsData.slice(newStartIndex, newEndIndex)); + setVisibleYears(prevExecTeamList.slice(newStartIndex, newEndIndex)); } } }; @@ -129,8 +113,6 @@ const PreviousExecTeam = (props: PreviousExecTeamProps) => { {visibleYears.map((data) => ( setSelectedYear(data.year)} > {data.year} @@ -139,28 +121,37 @@ const PreviousExecTeam = (props: PreviousExecTeamProps) => { - - - - {prevTeamsData + {prevExecTeamList .filter((team) => team.year === selectedYear) - .map((team) => { + .map((team: PrevExecTeam) => { const totalMember = team.members.length; - const membersPerRow = props.desktopView ? 2 : 1; // based on the view, how many columns + const membersPerRow = desktopView ? 3 : 1; // based on the view, how many columns const lastRowStartIndex = Math.floor((totalMember - 1) / membersPerRow) * membersPerRow; // index of element that will be on the last row return ( <> + + {team.picture ? ( + + ): ( +

No picture available

+ )} + + + {team.members.length > 0 && ( <> {team.members.map((member, index) => ( @@ -180,10 +171,11 @@ const PreviousExecTeam = (props: PreviousExecTeamProps) => { ))} )} + + ); })} - ); }; diff --git a/src/components/PreviousExecTeam/PreviousExecTeamsInfo.json b/src/components/PreviousExecTeam/PreviousExecTeamsInfo.ts similarity index 94% rename from src/components/PreviousExecTeam/PreviousExecTeamsInfo.json rename to src/components/PreviousExecTeam/PreviousExecTeamsInfo.ts index 4439613..baf4ea3 100644 --- a/src/components/PreviousExecTeam/PreviousExecTeamsInfo.json +++ b/src/components/PreviousExecTeam/PreviousExecTeamsInfo.ts @@ -1,6 +1,17 @@ -[ +import exec2023 from "../../images/previousTeam/exec_23.png"; +import exec2022 from "../../images/previousTeam/exec_22.png"; +import exec2021 from "../../images/previousTeam/exec_21.png"; + +export type PrevExecTeam = { + year : string; + picture: string; + members: {name: string, role: string, linkedin_url: string}[]; +}; + +export const prevExecTeamList : PrevExecTeam[] =[ { "year": "2021-2022", + "picture": exec2021, "members": [ { "name": "Joel Happ", @@ -62,6 +73,7 @@ }, { "year": "2022-2023", + "picture": exec2022, "members": [ { "name": "Niyousha Raeesinejad", @@ -148,6 +160,7 @@ }, { "year": "2023-2024", + "picture": exec2023, "members": [ { "name": "Niyousha Raeesinejad", diff --git a/src/images/previousTeam/exec_21.png b/src/images/previousTeam/exec_21.png new file mode 100644 index 0000000..8aff81a Binary files /dev/null and b/src/images/previousTeam/exec_21.png differ diff --git a/src/images/previousTeam/exec_22.png b/src/images/previousTeam/exec_22.png new file mode 100644 index 0000000..b0c5908 Binary files /dev/null and b/src/images/previousTeam/exec_22.png differ diff --git a/src/images/previousTeam/exec_23.png b/src/images/previousTeam/exec_23.png new file mode 100644 index 0000000..56de7d0 Binary files /dev/null and b/src/images/previousTeam/exec_23.png differ