Fixed president Carousel buttons and removed presidentavatar

Author: Yemyam

components/Avatar.jsx

@@ -4,16 +4,24 @@ import FontAwesomeLink from './FontAwesomeLink';
 
 const PROFILE_CONTAINER = 'flex flex-col items-center m-10';
 
-const Avatar = ({ name, linkedin, position, pfp, classes, prevRole, profileContainerClasses = '' }) => {
+const Avatar = ({ name, linkedin, position, pfp, classes, prevRole, currRole, profileContainerClasses = '' }) => {
   const img = 'https:' + pfp.fields.file.url;
+  const isPresidentAvatar = String(classes).includes("president-avatar");
   return (
     <div className={`${PROFILE_CONTAINER} ${profileContainerClasses}`}>
       <div className={`w-28 h-28 sm:w-48 sm:h-48 rounded-full relative overflow-hidden`}>
         <Image src={img} alt={name} layout="fill" objectFit="contain" unoptimized={true} />
       </div>
       <h2 className={`text-[#7055FD] text-xs sm:text-base font-semibold mt-3 ${classes}`}>{name}</h2>
       <h2 className={`text-[#7055FD] 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={`text-[#7055FD] 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>

components/CoPresident.jsx

@@ -3,7 +3,7 @@ import { SwiperSlide } from 'swiper/react';
 import Carousel from './Carousel';
 import 'swiper/css';
 import 'swiper/css/navigation';
-import Avatar from './PresidentAvatar';
+import Avatar from './Avatar';
 const CAROUSEL_CONTAINER = 'president-carousel text-white rounded-lg w-[20rem] h-full md:w-4/5 swiper-button-white flex justify-center items-center';
 const PRESIDENT_TILE =
   'bg-[#A689FF] bg-opacity-50 w-[20rem] h-[70rem] md:h-[25rem] rounded-lg items-center p-14 lg:p-10 flex flex-col md:w-4/5 md:flex-row';
@@ -24,7 +24,7 @@ const President = [[{
       }
     }
   },
-  classes: "text-[#7055FD]",
+  classes: "text-[#7055FD] president-avatar !mb-0",
 },
 {
   name: "John Doe",
@@ -40,7 +40,7 @@ const President = [[{
       }
     }
   },
-  classes: "text-[#7055FD]",
+  classes: "text-[#7055FD] president-avatar !mb-0",
 }
 ],
 [{
@@ -57,7 +57,7 @@ const President = [[{
       }
     }
   },
-  classes: "text-[#7055FD]",
+  classes: "text-[#7055FD] president-avatar !mb-0",
 },
 ]];
 
@@ -77,7 +77,7 @@ const PresidentTile = ({ name, linkedin, pfp, classes, testimonial, position, cu
 const CoPresident = () => {
   return (
     <div className={CAROUSEL_CONTAINER}>
-      <Carousel>
+      <Carousel className='president-carousel'>
         {President.map((president) => (
           <SwiperSlide key={president[0].name}>
             <div className='bg-white w-full rounded-3xl h-full flex flex-col justify-center items-center gap-10 py-20'>

components/PresidentAvatar.jsx

@@ -1,13 +1,12 @@
 import UnderConstruction from '../../components/UnderConstruction';
-import AlumniSection from '../../components/AlumniSection';
 
 const OurTeam = () => {
   return (
     <div>
       {/* <MeetOurTeam />
       <InternalTeam />
-      <TechnicalTeam /> */} 
-      <AlumniSection />
+      <TechnicalTeam />  
+      <AlumniSection /> */}
       <UnderConstruction />
     </div>
   );

pages/our-team/index.js

@@ -44,9 +44,9 @@
 }
 
 .president-carousel .swiper-button-next {
-  right: 0px;
+  color: white;
 }
 
 .president-carousel .swiper-button-prev {
-  left: 0px;
+  color: white;
 }