Web 78 add alumni section

components/AlumniSection.jsx

@@ -0,0 +1,211 @@
+import Team from './Team';
+import { fetchContent } from '../api/apiRoot';
+import { useState, useEffect } from 'react';
+import { Tabs, TabsHeader, TabsBody, Tab, TabPanel } from '@material-tailwind/react';
+import Heading from './Heading';
+import { UnderlineTypes } from '../utils/underlineType';
+import CoPresident from "./CoPresident";
+import Image from 'next/image';
+const GREEN_SIDE_LINES_DIR = '/svgs/green_side_lines.svg';
+
+// Dummy values to be replaced with contentful
+const people  = [{
+  name: "John Doe",
+  linkedin: "randomlink.com",
+  position: "Dev",
+  project: "Events",
+  pfp: {
+    fields: {
+      file: {
+        url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+      }
+    }
+  },
+  classes: "text-white",
+},
+{
+  name: "John Doe",
+  linkedin: "randomlink.com",
+  position: "Dev",
+  project: "Events",
+  pfp: {
+    fields: {
+      file: {
+        url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+      }
+    }
+  },
+  classes: "text-white",
+},
+{
+  name: "John Doe",
+  linkedin: "randomlink.com",
+  position: "Dev",
+  project: "Events",
+  pfp: {
+    fields: {
+      file: {
+        url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+      }
+    }
+  },
+  classes: "text-white",
+},
+{
+  name: "John Doe",
+  linkedin: "randomlink.com",
+  position: "Dev",
+  project: "Events",
+  pfp: {
+    fields: {
+      file: {
+        url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+      }
+    }
+  },
+  classes: "text-white",
+},
+
+{
+  name: "John Doe",
+  linkedin: "randomlink.com",
+  position: "Dev",
+  project: "Events",
+  pfp: {
+    fields: {
+      file: {
+        url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+      }
+    }
+  },
+  classes: "text-white",
+},
+{
+  name: "John Doe",
+  linkedin: "randomlink.com",
+  position: "Dev",
+  project: "Events",
+  pfp: {
+    fields: {
+      file: {
+        url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+      }
+    }
+  },
+  classes: "text-white",
+},
+{
+  name: "John Doe",
+  linkedin: "randomlink.com",
+  position: "Dev",
+  project: "Events",
+  pfp: {
+    fields: {
+      file: {
+        url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+      }
+    }
+  },
+  classes: "text-white",
+},
+{
+  name: "John Doe",
+  linkedin: "randomlink.com",
+  position: "Dev",
+  project: "Finance",
+  pfp: {
+    fields: {
+      file: {
+        url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+      }
+    }
+  },
+  classes: "text-white",
+},
+{
+  name: "John Doe",
+  linkedin: "randomlink.com",
+  position: "Dev",
+  project: "Marketing",
+  pfp: {
+    fields: {
+      file: {
+        url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+      }
+    }
+  },
+  classes: "text-white",
+},
+{
+  name: "John Doe",
+  linkedin: "randomlink.com",
+  position: "Dev",
+  project: "Tech",
+  pfp: {
+    fields: {
+      file: {
+        url: "//t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
+      }
+    }
+  },
+  classes: "text-white",
+},
+];
+
+const AlumniSection = () => {
+  const [executives, setExecutives] = useState([]);
+  const [teams, setTeams] = useState([]);
+  const [activeTab, setActiveTab] = useState('');
+
+  useEffect(() => {
+    // Put Contenful stuff here
+    fetchContent('technicalTeam').then(() => {
+      setExecutives(people);
+
+      setTeams(["Presidents", "Events", "Finance", "Marketing", "Tech"]);
+
+      setActiveTab("Presidents");
+    });
+  }, []);
+
+  return (
+    <section className="bg-[#7055FD] p-20 md:min-h-screen h-full">
+      <div className="mb-20 flex flex-row justify-center">
+        <Image src={GREEN_SIDE_LINES_DIR} width={30} height={30} alt="" className='pb-16'/>
+        <Heading underlineType={UnderlineTypes.GREEN_SHORT_UNDERLINE} classes={"text-white"}>Alumni</Heading>
+      </div>
+      <div>
+        {teams.length > 0 && (
+          <Tabs 
+            value={activeTab}>
+            <TabsHeader className="flex flex-row justify-center gap-4 pb-20">
+              {teams.map((project) => (
+                <Tab className={`alumni-tab rounded-full p-2 font-medium text-white ${
+                  activeTab === project
+                    ? 'bg-[#00D3A9]'
+                    : ''
+                }`} key={project} value={project} onClick={() => setActiveTab(project)}>
+                  {project}
+                </Tab>
+              ))}
+            </TabsHeader>
+            <TabsBody>
+              {teams.map((project) => (
+                <TabPanel key={project} value={project}>
+                  {project === "Presidents" ? (
+                    <div className="text-white text-center text-xl font-semibold flex justify-center">
+                      <CoPresident />
+                    </div>) : (
+                    <Team teamMembers={executives.filter((exec) => exec.project === project)} />
+                  )}
+                </TabPanel>
+              ))}
+            </TabsBody>
+          </Tabs>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default AlumniSection;

components/Avatar.jsx

@@ -7,8 +7,9 @@ import { PageIdentifiers } from '../utils/flags';
 
 const PROFILE_CONTAINER = 'flex flex-col items-center m-10';
 
-const Avatar = ({ name, linkedin, position, pfp, classes, prevRole, profileContainerClasses = '', teamIdentifier }) => {
+const Avatar = ({ name, linkedin, position, pfp, classes, prevRole, currRole, profileContainerClasses = '', teamIdentifier }) => {
   const img = 'https:' + pfp.fields.file.url;
+  const isPresidentAvatar = String(classes).includes("president-avatar");
 
   const colorTheme =
     teamIdentifier === PageIdentifiers.INTERNAL_LEVEL_CONTAINER
@@ -24,7 +25,14 @@ const Avatar = ({ name, linkedin, position, pfp, classes, prevRole, profileConta
       </div>
       <h2 className={`${colorTheme} text-xs sm:text-base font-semibold mt-3 ${classes}`}>{name}</h2>
       <h2 className={`${colorTheme} text-xs sm:text-base font-medium mb-2 ${classes}`}>{position}</h2>
-      {prevRole && (
+      {isPresidentAvatar && (
+        <h2
+          className={`text-[#7055FD] w-28 text-center text-xs sm:text-base hidden sm:block font-medium mb-2 ${classes}`}
+        >
+          {currRole}
+        </h2>
+      )}
+      {(prevRole && !isPresidentAvatar) && (
         <h2
           className={`${colorTheme} w-28 text-center text-xs sm:text-base hidden sm:block font-medium mb-2 ${classes}`}
         >

components/Carousel.jsx

@@ -3,10 +3,60 @@ import { Navigation, Pagination } from "swiper";
 import "swiper/css";
 import "swiper/css/effect-cards";
 import "swiper/css/pagination";
+import { useRef } from "react";
 
 const SPACE_BETWEEN_ELEMENTS = 50;
 
-const Carousel = (props) => {
+const Carousel = ({ children, className='', ...props }) => {
+  const isPresidentCarousel = String(className).includes("president-carousel");
+  const prevRef = useRef(null);
+  const nextRef = useRef(null);
+
+  if (isPresidentCarousel) {
+    return (
+      <div className="relative w-full flex items-center justify-center">
+        {/* Custom Navigation Buttons */}
+        <button
+          ref={prevRef}
+          className="absolute z-10 left-[-2rem] md:left-[-4rem] top-1/2 -translate-y-1/2"
+        >
+          <div className="swiper-button-prev"></div>
+        </button>
+        <button
+          ref={nextRef}
+          className="absolute z-10 right-[-2rem] md:right-[-4rem] top-1/2 -translate-y-1/2"
+        >
+          <div className="swiper-button-next"></div>
+        </button>
+
+        <Swiper
+          style={{
+            "--swiper-navigation-color": "#FFF",
+            "--swiper-navigation-size": "25px",
+            "--swiper-pagination-color": "#FFF",
+          }}
+          modules={[Navigation, Pagination]}
+          navigation={{
+            prevEl: prevRef.current,
+            nextEl: nextRef.current,
+          }}
+          onBeforeInit={(swiper) => {
+            swiper.params.navigation.prevEl = prevRef.current;
+            swiper.params.navigation.nextEl = nextRef.current;
+          }}
+          pagination={{ clickable: true }}
+          spaceBetween={SPACE_BETWEEN_ELEMENTS}
+          className={`mySwiper ${className}`}
+          {...props}
+        >
+          {children.map((child, index) => (
+            <SwiperSlide key={index}>{child}</SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    );
+  }
+
   return (
     <Swiper
       style={{
@@ -21,7 +71,7 @@ const Carousel = (props) => {
       className="mySwiper"
       {...props}
     >
-      {props.children.map((child, index) => (
+      {children.map((child, index) => (
         <SwiperSlide key={index}>{child}</SwiperSlide>
       ))}
     </Swiper>