Isaiah/previous exec teams

src/App.css

@@ -16,6 +16,7 @@
   --secondary-grey: #222222f2;
   --toggle-green: #4dd6a8;
   --toggle-blue: #61c3d4;
+  --toggle-earthGreen: #a4c639;
   --title-size: clamp(1.4rem, calc(15vw + 1rem), 8rem);
   --chonky-header-size: 4.75rem;
   --thicc-subheading-size: 2.5rem;

src/components/PreviousExecTeam/PreviousExecTeam.styles.ts

@@ -0,0 +1,107 @@
+import styled from "styled-components";
+
+export const PrevTeamSection = styled.div`
+  margin-left: auto;
+  margin-right: auto;
+  padding-bottom: 2rem;
+  text-align: center;
+  background-color: white;
+
+`;
+
+export const SectionHeader = styled.div`
+  padding: 2rem 0;
+  font-size: 2.5rem;
+  color: black;
+  font-weight: 900;
+  text-align: center;
+  font-family: Inter, Tahoma, sans-serif;
+  line-height: 1;
+`;
+
+export const PaginationControl = styled.div`
+  display: flex;
+  /* border: 1px red solid; */
+  margin-left: auto;
+  margin-right: auto;
+  justify-content: center;
+`;
+
+export const ArrowButton = styled.button`
+  background-color: white;
+  border: none;
+  border-radius: 50%;
+  color: #333;
+  font-size: 1.5rem;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: #e0e0e0;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+
+export const YearButton = styled.div`
+  background-color: transparent;
+  border: 1px lightgray solid;
+  border-radius: 10px;
+  color: #333;
+  font-size: 1.2rem;
+  padding: 0.5rem 2rem;
+  margin: 0 0.3rem;
+  transition: color 0.3s;
+`;
+
+export const Carousel = styled.div`
+  width: 40%;
+  margin: 3rem auto;
+  @media(max-width: 768px) {
+    width: 80%;
+  }
+`;
+
+export const TeamList = styled.div`
+  max-width: 85%;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+    @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+export const TeamMember = styled.div`
+  background-color: #f5f5f5;
+  border-radius: 0.5rem;
+  padding: 1rem 0rem;
+`;
+
+export const TeamHeader = styled.a`
+  font-size: 20px;
+  font-weight: bold;
+  margin: 0 0 10px 0;
+  text-decoration: none;
+  color: inherit;
+  transition: color 0.3s, text-decoration 0.3;
+  &:hover {
+    color: #4dd6a8;
+    text-decoration: underline;
+  }
+`;
+
+export const TeamRole = styled.p`
+  font-size: 16px;
+  margin: 0 0 5px 0;
+
+`;
+export const YearPagination = styled.div``;

src/components/PreviousExecTeam/PreviousExecTeam.tsx

@@ -0,0 +1,195 @@
+import React, { useEffect, useState } from "react";
+import * as S from "./PreviousExecTeam.styles";
+import { prevExecTeamList, PrevExecTeam } from "./PreviousExecTeamsInfo";
+// https://react-slick.neostack.com/docs/example/
+import Divider from "components/Divider";
+import {
+  faChevronLeft,
+  faChevronRight,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const PAGINATION_VISIBLE_YEARS = 1;
+
+// interface of the prop
+interface PreviousExecTeamProps {
+  desktopView: boolean;
+}
+const PreviousExecTeam = ({ desktopView }: PreviousExecTeamProps) => {
+  const [selectedYear, setSelectedYear] = useState(
+    prevExecTeamList[prevExecTeamList.length - 1].year
+  );
+  const [visibleYears, setVisibleYears] = useState<PrevExecTeam[]>([]);
+
+  useEffect(() => {
+    updateVisibleYears();
+  }, [desktopView]); // only run on inital render or when view changes
+
+  // Function to set the visible years
+  function updateVisibleYears() {
+    const selectedYearIndex = getSelectedYearIndex();
+
+    // Calculate startIndex based on the selectedYearIndex
+    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(PAGINATION_VISIBLE_YEARS / 2)
+      );
+    }
+
+    // Calculate endIndex based on startIndex
+    const endIndex = Math.min(
+      prevExecTeamList.length,
+      startIndex + PAGINATION_VISIBLE_YEARS
+    );
+
+    setVisibleYears(prevExecTeamList.slice(startIndex, endIndex));
+  }
+
+  const getSelectedYearIndex = (): number =>
+    prevExecTeamList.findIndex((data) => data.year === selectedYear);
+
+  const handleLeftArrow = () => {
+    const selectedYearIndex = getSelectedYearIndex();
+    if (selectedYearIndex > 0) {
+      setSelectedYear(prevExecTeamList[selectedYearIndex - 1].year);
+
+      // Recalculate visible years only if necessary
+      const currentStartIndex = prevExecTeamList.findIndex(
+        (data) => data.year === visibleYears[0].year
+      );
+
+      // if the selectedyear index less that the start of the visible year array
+      if (selectedYearIndex - 1 < currentStartIndex) {
+        // 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(
+          prevExecTeamList.length,
+          newStartIndex + PAGINATION_VISIBLE_YEARS
+        );
+        setVisibleYears(prevExecTeamList.slice(newStartIndex, newEndIndex));
+      }
+    }
+  };
+  const handleRightArrow = () => {
+    const selectedYearIndex = getSelectedYearIndex();
+    if (selectedYearIndex < prevExecTeamList.length - 1) {
+      setSelectedYear(prevExecTeamList[selectedYearIndex + 1].year);
+
+      // Recalculate visible years only if necessary
+      const currentStartIndex = prevExecTeamList.findIndex(
+        (data) => data.year === visibleYears[0].year
+      );
+
+      // If the selected year moves beyond the currently visible years
+      if (
+        selectedYearIndex + 1 >=
+        currentStartIndex + PAGINATION_VISIBLE_YEARS
+      ) {
+        // Shift the visible years by one to the right
+        const newStartIndex = Math.min(
+          prevExecTeamList.length - PAGINATION_VISIBLE_YEARS,
+          currentStartIndex + 1
+        );
+        const newEndIndex = Math.min(
+          prevExecTeamList.length,
+          newStartIndex + PAGINATION_VISIBLE_YEARS
+        );
+        setVisibleYears(prevExecTeamList.slice(newStartIndex, newEndIndex));
+      }
+    }
+  };
+
+  return (
+    <S.PrevTeamSection>
+      <Divider />
+      <S.SectionHeader>Previous Executives</S.SectionHeader>
+      <S.PaginationControl>
+        <S.ArrowButton
+          className="arrow-button"
+          onClick={handleLeftArrow}
+          disabled={getSelectedYearIndex() === 0}
+        >
+          <FontAwesomeIcon
+            icon={faChevronLeft}
+            size="sm"
+            style={{ color: getSelectedYearIndex() === 0 ? "grey" : "black" }}
+          />
+        </S.ArrowButton>
+        <S.YearPagination>
+          {visibleYears.map((data) => (
+            <S.YearButton key={data.year}>{data.year}</S.YearButton>
+          ))}
+        </S.YearPagination>
+        <S.ArrowButton
+          className="arrow-button"
+          onClick={handleRightArrow}
+          disabled={getSelectedYearIndex() === prevExecTeamList.length - 1}
+        >
+          <FontAwesomeIcon
+            icon={faChevronRight}
+            size="sm"
+            style={{
+              color:
+                getSelectedYearIndex() === prevExecTeamList.length - 1
+                  ? "grey"
+                  : "black",
+            }}
+          />
+        </S.ArrowButton>
+      </S.PaginationControl>
+
+      {prevExecTeamList
+        .filter((team) => team.year === selectedYear)
+        .map((team: PrevExecTeam) => {
+          return (
+            <>
+              <S.Carousel>
+                {team.picture ? (
+                  <img
+                    src={team.picture}
+                    style={{
+                      width: "100%",
+                      height: "auto",
+                      borderRadius: "0.75rem",
+                      objectFit: "cover",
+                      boxShadow: "0rem 1.5rem 2rem -1.5rem rgba(0, 0, 0, 0.7)",
+                    }}
+                  />
+                ) : (
+                  <p>No picture available</p>
+                )}
+              </S.Carousel>
+              <S.TeamList>
+                {team.members.length > 0 && (
+                  <>
+                    {team.members.map((member, index) => (
+                      <S.TeamMember key={index}>
+                        <div style={{ justifyContent: "center" }}>
+                          <S.TeamHeader
+                            href={member.linkedin_url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                          >
+                            {member.name}
+                          </S.TeamHeader>
+                          <S.TeamRole>{member.role}</S.TeamRole>
+                        </div>
+                      </S.TeamMember>
+                    ))}
+                  </>
+                )}
+              </S.TeamList>
+            </>
+          );
+        })}
+    </S.PrevTeamSection>
+  );
+};
+
+export default React.memo(PreviousExecTeam);