Merge pull request #104 from Singh-Vibhor/dev

Events Carousal Added
TCP-Tech · Oct 4, 2023 · 98847b2 · 98847b2
2 parents 03e9ae2 + d03d481
commit 98847b2
Show file tree

Hide file tree

Showing 6 changed files with 191 additions and 12 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "react-apexcharts": "^1.4.1",
     "react-countup": "^6.4.2",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
     "react-router-dom": "^6.6.0",
     "react-scripts": "5.0.1",
     "react-scroll-trigger": "^0.6.14",

diff --git a/src/assets/data/eventsData.js b/src/assets/data/eventsData.js
@@ -20,6 +20,12 @@ const events = [
     img: e,
     link: "",
   },
+  {
+    title: "Coming Soon!",
+    date: "Coming Soon!",
+    img: e,
+    link: "",
+  },
 ];
 
 export default events;
diff --git a/src/components/eventCard/EventCard.css b/src/components/eventCard/EventCard.css
@@ -12,6 +12,7 @@
   background-size: cover;
   display: flex;
   flex-direction: column;
+  margin: 10px;
   box-sizing: border-box;
   font-family: "Poppins", sans-serif;
   color: black;
@@ -44,6 +45,7 @@
   position: relative;
   margin: auto;
   width: 100%;
+  height: auto;
   transition: all 0.2s ease-in-out;
   border-radius: 4px;
   border: 2px solid orange;

diff --git a/src/pages/home/sections/section3/Section3.css b/src/pages/home/sections/section3/Section3.css
@@ -33,6 +33,9 @@
 
 .codeutsava__section3-events-container {
   max-width: 98%;
+  padding: 8rem 0;
+  margin: 4rem auto;
+  flex-direction: column;
 }
 
 .codeutsava__section3-events-container .slider .slick-list {

diff --git a/src/pages/home/sections/section3/Section3.js b/src/pages/home/sections/section3/Section3.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 
 import "./Section3.css";
 
@@ -16,6 +16,8 @@ import frank from "../../../../assets/images/frakenstein.png";
 
 import axios from "axios";
 
+import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai";
+
 const Section3 = () => {
   const url = baseUrl + "events/" + previousYear;
   const [state, setState] = useState({
@@ -36,6 +38,138 @@ const Section3 = () => {
 
   console.log(state.data);
 
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const timeRef = useRef(null);
+
+  const carousalStyle = {
+    height: "100%",
+    width: "100%",
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    padding: "1.2rem",
+    border: "1px solid #f1f1f1aa",
+  };
+
+  const slidesOverflow = {
+    overflow: "hidden",
+    height: "100%",
+  };
+
+  const getSlidesStyle = () => {
+    if (window.innerWidth>1300)
+    return ({
+      display: "flex",
+      height: "auto",
+      transition: "transform ease-out 0.3s",
+      width: `${(100 * Events.length)/3}%`,
+      transform: `translateX(${-(
+        currentIndex *
+        (100 / Events.length)
+      )}%)`,
+    })
+
+    if (window.innerWidth>1025)
+    return ({
+      display: "flex",
+      height: "100%",
+      transition: "transform ease-out 0.3s",
+      width: `${(100 * Events.length)/2}%`,
+      transform: `translateX(${-(
+        currentIndex *
+        (100 / Events.length)
+      )}%)`,
+    })
+
+    if (window.innerWidth>450)
+    return ({
+      display: "flex",
+      height: "100%",
+      transition: "transform ease-out 0.3s",
+      width: `${(100 * Events.length)}%`,
+      transform: `translateX(${-(
+        currentIndex *
+        (100 / Events.length)
+      )}%)`,
+    })
+
+    return ({
+      display: "flex",
+      height: "100%",
+      transition: "transform ease-out 0.3s",
+      width: `${(100 * Events.length)}%`,
+      transform: `translateX(${-(
+        currentIndex *
+        (100 / Events.length)
+      )}%)`,
+    })
+  };
+
+  const goToPrevious = () => {
+    if (window.innerWidth>1300){
+      const isFirst = currentIndex === 0;
+      const newIndex = isFirst ? Events.length - 3 : currentIndex - 1;
+      setCurrentIndex(newIndex);
+    }
+    else if (window.innerWidth>1025){
+      const isFirst = currentIndex === 0;
+      const newIndex = isFirst ? Events.length - 2 : currentIndex - 1;
+      setCurrentIndex(newIndex);
+    }
+    else {  
+      const isFirst = currentIndex === 0;
+      const newIndex = isFirst ? Events.length - 1 : currentIndex - 1;
+      setCurrentIndex(newIndex);
+    }
+  };
+
+  const goToNext = () => {
+    if (window.innerWidth>1300)
+    {
+      const isLast = currentIndex === Events.length - 3;
+      const newIndex = isLast ? 0 : currentIndex + 1;
+      setCurrentIndex(newIndex);
+    }
+    else if (window.innerWidth>1025){
+      const isLast = currentIndex === Events.length - 2;
+      const newIndex = isLast ? 0 : currentIndex + 1;
+      setCurrentIndex(newIndex);
+    }
+    else {
+      const isLast = currentIndex === Events.length - 1;
+      const newIndex = isLast ? 0 : currentIndex + 1;
+      setCurrentIndex(newIndex);
+    }
+  };
+
+  const leftArrowStyle = {
+    position: "absolute",
+    top: "40%",
+    opacity: "0.5",
+    cursor: "pointer",
+    zIndex: 1,
+    left: "32px"
+  }
+
+  const rightArrowStyles = {
+    position: "absolute",
+    top: "40%",
+    opacity: "0.5",
+    cursor: "pointer",
+    zIndex: 1,
+    right: "32px"
+  }
+
+  useEffect (() => {
+    if (timeRef.current) {
+      clearTimeout(timeRef.current);
+    }
+    timeRef.current = setTimeout(() => {
+
+      goToNext();
+    }, 2000);
+  })
+
   return (
     <div
       className="codeutsava__section3"
@@ -46,17 +180,35 @@ const Section3 = () => {
         Events
       </div>
       <div className="codeutsava__section3-events-container">
-        <Slider {...sliderSettings} className="slider">
-          {Events.map((event, index) => (
-            <EventCard
-              key={index}
-              img={event.img}
-              title={event.title}
-              date={event.date}
-              link={event.link}
-            />
-          ))}
-        </Slider>
+        <div style={carousalStyle} className="slider">
+          <div style={slidesOverflow}>
+            <div style={getSlidesStyle()}>
+              {Events.map((event, index) => (
+                <EventCard
+                  key={index}
+                  img={event.img}
+                  title={event.title}
+                  date={event.date}
+                  link={event.link}
+                />
+              ))}
+            </div>
+          </div>
+          <div style = {leftArrowStyle} onClick= {() => goToPrevious()}>
+                <AiOutlineLeft
+                  className="hover:bg-black"
+                  size = {"60px"}
+                  color = {"grey"}
+                />
+             </div>
+             <div style = {rightArrowStyles} onClick= {() => goToNext()}>
+                <AiOutlineRight
+                  className="hover:bg-black"
+                  size = {"60px"}
+                  color = {"grey"}
+                />
+            </div>
+        </div>
       </div>
     </div>
   );