From 1b4684957dc02aa60f33c09d12c05d066e556f2e Mon Sep 17 00:00:00 2001 From: yash Saraswat Date: Fri, 4 Oct 2024 11:52:39 +0530 Subject: [PATCH] Changed slider.js to stop Homepage Carousel Movement for Fewer Events #397 --- components/Countdown/countdown.js | 220 +++++++++++++++--------------- components/Slider/slider.js | 56 ++++---- components/Venue/venue.js | 84 ++++++++---- pages/_app.js | 20 +-- 4 files changed, 203 insertions(+), 177 deletions(-) diff --git a/components/Countdown/countdown.js b/components/Countdown/countdown.js index 58247b17..fb1a00b6 100644 --- a/components/Countdown/countdown.js +++ b/components/Countdown/countdown.js @@ -1,120 +1,122 @@ -import React, { useEffect, useRef, useState } from 'react'; -import Countdown from 'react-countdown'; +import { useEffect, useRef, useState } from "react"; +import Countdown from "react-countdown"; const dates = [ - { - name: 'London, UK', - date: 'September 20, 2023', - }, - { - name: 'Madrid, Spain', - date: 'October 19, 2023', - }, - { - name: 'Bangalore, India', - date: 'November 30, 2023', - }, - { - name: 'Paris, France', - date: 'December 6, 2023', - }, + { + name: "London, UK", + date: "September 20, 2023", + }, + { + name: "Madrid, Spain", + date: "October 19, 2023", + }, + { + name: "Bangalore, India", + date: "November 30, 2023", + }, + { + name: "Paris, France", + date: "December 6, 2023", + }, ]; function Countdowns() { - const [selectedIndex, setSelectedIndex] = useState(0); + const [selectedIndex, setSelectedIndex] = useState(0); - const locationRef = useRef(null); - const dateRef = useRef(null); - useEffect(() => { - const intervalId = setInterval(() => { - locationRef.current.classList.remove('hidden'); - locationRef.current.classList.add('home-title'); - dateRef.current.classList.remove('hidden'); - dateRef.current.classList.add('home-title'); - setSelectedIndex((prevIndex) => (prevIndex + 1) % dates.length); - setTimeout(() => { - if(locationRef?.current) { - locationRef.current.classList.remove('home-title'); - locationRef.current.classList.add('hidden'); - } - if(dateRef?.current) { - dateRef.current.classList.remove('home-title'); - dateRef.current.classList.add('hidden'); - } - }, 9900); // Element stays visible for 800 milliseconds - }, 10000); // Toggle visibility every 1500 milliseconds + const locationRef = useRef(null); + const dateRef = useRef(null); + useEffect(() => { + const intervalId = setInterval(() => { + locationRef.current.classList.remove("hidden"); + locationRef.current.classList.add("home-title"); + dateRef.current.classList.remove("hidden"); + dateRef.current.classList.add("home-title"); + setSelectedIndex((prevIndex) => (prevIndex + 1) % dates.length); + setTimeout(() => { + if (locationRef?.current) { + locationRef.current.classList.remove("home-title"); + locationRef.current.classList.add("hidden"); + } + if (dateRef?.current) { + dateRef.current.classList.remove("home-title"); + dateRef.current.classList.add("hidden"); + } + }, 9900); // Element stays visible for 800 milliseconds + }, 10000); // Toggle visibility every 1500 milliseconds - return () => { - clearInterval(intervalId); - }; - }, []); + return () => { + clearInterval(intervalId); + }; + }, []); - const renderer = ({ days, hours, minutes, seconds, completed }) => { - if (completed) { - // Render a completed state - return
-
-
-
-
-
- - Ended - -
-
- } else { - // Render a countdown - return ( -
-
- - {days}: - -
-
- - {hours}: - -
-
- - {minutes}: - -
-
- - {seconds} - -
-
- ); - } - }; - return ( -
-
-
- - {dates[selectedIndex].name} - -
-
-
- -
-
- ); + const renderer = ({ days, hours, minutes, seconds, completed }) => { + if (completed) { + // Render a completed state + return ( +
+
+
+
+
+
+ + Ended + +
+
+ ); + } else { + // Render a countdown + return ( +
+
+ + {days}: + +
+
+ + {hours}: + +
+
+ + {minutes}: + +
+
+ + {seconds} + +
+
+ ); + } + }; + return ( +
+
+
+ + {dates[selectedIndex].name} + +
+
+
+ +
+
+ ); } export default Countdowns; diff --git a/components/Slider/slider.js b/components/Slider/slider.js index e7dc80d2..8465be4d 100644 --- a/components/Slider/slider.js +++ b/components/Slider/slider.js @@ -1,34 +1,34 @@ -import Slider from 'react-slick'; -import Arrow from '../illustration/arrow'; -import React, { useEffect, useState, useRef } from 'react'; -import { useMediaQuery } from 'react-responsive'; +import Slider from "react-slick"; +import Arrow from "../illustration/arrow"; +import React, { useEffect, useState, useRef } from "react"; +import { useMediaQuery } from "react-responsive"; function ReactSlider({ children }) { - const isMobile = useMediaQuery({ maxWidth: '590px' }); - const [slides, setSlides] = useState(1); + const isMobile = useMediaQuery({ maxWidth: "590px" }); + const [slides, setSlides] = useState(1); - useEffect(() => { - if (isMobile) { - setSlides(1); - } - }, [isMobile]); - const slider = useRef(null); - const settings = { - slidesToScroll: slides, - infinite: true, - autoplay: true, - speed: 10000, - autoplaySpeed: 0, - centerMode: true, - cssEase: 'linear', - variableWidth: isMobile ? false : true, - arrows: false, - }; - return ( - - {children} - - ); + useEffect(() => { + if (isMobile) { + setSlides(1); + } + }, [isMobile]); + const slider = useRef(null); + const settings = { + slidesToScroll: slides, + infinite: true, + autoplay: children.length > 4, + speed: 10000, + autoplaySpeed: 0, + centerMode: true, + cssEase: "linear", + variableWidth: isMobile ? false : true, + arrows: false, + }; + return ( + + {children} + + ); } export default ReactSlider; diff --git a/components/Venue/venue.js b/components/Venue/venue.js index dae60cba..9ace5de7 100644 --- a/components/Venue/venue.js +++ b/components/Venue/venue.js @@ -1,36 +1,60 @@ /* eslint-disable react/no-unescaped-entities */ -import React from 'react'; -import Link from 'next/link'; -import Image from 'next/image'; +import React from "react"; +import Link from "next/link"; +import Image from "next/image"; function Venue({ className, city }) { - return ( - -
-
-
- {city.cfp?
cfp is open
:null} - -
-
-
-
- {city.name=='Online'?{city.name} {city.country}:{city.country}, {city.name}} -
-
-
{city.date}
-
-
-
-
- - ); + return ( + +
+
+
+ {city.cfp ? ( +
+ cfp is open +
+ ) : null} + +
+
+
+
+ {city.name == "Online" ? ( + + {city.name} {city.country} + + ) : ( + + {city.country}, {city.name} + + )} +
+
+
+ {city.date} +
+
+
+
+
+ + ); } export default Venue; diff --git a/pages/_app.js b/pages/_app.js index a7e54e34..397d70fe 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,9 +1,9 @@ -import '../styles/globals.css'; -import 'slick-carousel/slick/slick.css'; -import 'slick-carousel/slick/slick-theme.css'; -import Navbar from '../components/Navbar/navbar'; -import Footer from '../components/Footer/footer'; -import { useState, useEffect } from 'react'; +import "../styles/globals.css"; +import "slick-carousel/slick/slick.css"; +import "slick-carousel/slick/slick-theme.css"; +import Navbar from "../components/Navbar/navbar"; +import Footer from "../components/Footer/footer"; +import { useState, useEffect } from "react"; function MyApp({ Component, pageProps }) { const [showChild, setShowChild] = useState(false); @@ -17,13 +17,13 @@ function MyApp({ Component, pageProps }) { return <>; } return ( -
+
- +
+
); } -export default MyApp +export default MyApp;