Skip to content

Commit

Permalink
Changed slider.js to stop Homepage Carousel Movement for Fewer Events #…
Browse files Browse the repository at this point in the history 
…397
  • Loading branch information
@yashsaraswat2004
yashsaraswat2004 committed Oct 4, 2024
1 parent 4ff4dfd commit 1b46849
Show file tree
Hide file tree
Showing 4 changed files with 203 additions and 177 deletions.
220 changes: 111 additions & 109 deletions components/Countdown/countdown.js
View file
Original file line number Diff line number Diff line change
@@ -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 <div
className='home-title flex items-center w-[200px] sm:w-[100px] justify-between'
ref={dateRef}
>
<div></div>
<div></div>
<div></div>
<div></div>
<div>
<span className='glitch text-white text-[30px] sm:text-[18px]'>
Ended
</span>
</div>
</div>
} else {
// Render a countdown
return (
<div
className='home-title flex items-center w-[200px] sm:w-[100px] justify-between'
ref={dateRef}
>
<div>
<span className='glitch text-white text-[30px] sm:text-[18px]'>
{days}:
</span>
</div>
<div>
<span className='glitch text-white text-[30px] sm:text-[18px]'>
{hours}:
</span>
</div>
<div>
<span className='glitch text-white text-[30px] sm:text-[18px]'>
{minutes}:
</span>
</div>
<div>
<span className='glitch text-white text-[30px] sm:text-[18px]'>
{seconds}
</span>
</div>
</div>
);
}
};
return (
<div className='mt-[400px] sm:mt-[150px] flex items-center justify-between'>
<div className='h-[40px]'>
<div className='home-title' ref={locationRef}>
<span className='text-[25px] sm:text-[18px] text-white font-bold'>
{dates[selectedIndex].name}
</span>
</div>
</div>
<div className='h-[40px]'>
<Countdown
date={new Date(dates[selectedIndex].date)}
daysInHours={false}
renderer={renderer}
/>
</div>
</div>
);
const renderer = ({ days, hours, minutes, seconds, completed }) => {
if (completed) {
// Render a completed state
return (
<div
className="home-title flex items-center w-[200px] sm:w-[100px] justify-between"
ref={dateRef}
>
<div></div>
<div></div>
<div></div>
<div></div>
<div>
<span className="glitch text-white text-[30px] sm:text-[18px]">
Ended
</span>
</div>
</div>
);
} else {
// Render a countdown
return (
<div
className="home-title flex items-center w-[200px] sm:w-[100px] justify-between"
ref={dateRef}
>
<div>
<span className="glitch text-white text-[30px] sm:text-[18px]">
{days}:
</span>
</div>
<div>
<span className="glitch text-white text-[30px] sm:text-[18px]">
{hours}:
</span>
</div>
<div>
<span className="glitch text-white text-[30px] sm:text-[18px]">
{minutes}:
</span>
</div>
<div>
<span className="glitch text-white text-[30px] sm:text-[18px]">
{seconds}
</span>
</div>
</div>
);
}
};
return (
<div className="mt-[400px] sm:mt-[150px] flex items-center justify-between">
<div className="h-[40px]">
<div className="home-title" ref={locationRef}>
<span className="text-[25px] sm:text-[18px] text-white font-bold">
{dates[selectedIndex].name}
</span>
</div>
</div>
<div className="h-[40px]">
<Countdown
date={new Date(dates[selectedIndex].date)}
daysInHours={false}
renderer={renderer}
/>
</div>
</div>
);
}

export default Countdowns;
56 changes: 28 additions & 28 deletions components/Slider/slider.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<Slider ref={slider} {...settings}>
{children}
</Slider>
);
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 (
<Slider ref={slider} {...settings} className="overflow-hidden mr-5">
{children}
</Slider>
);
}

export default ReactSlider;
84 changes: 54 additions & 30 deletions components/Venue/venue.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<Link href={`/venue/${city.name}`}>
<div style={{'--image-url': `url(${city.img})`}}
className='relative w-[300px] h-[400px] sm:w-[250px] sm:h-[350px] card-bg rounded-md bg-[image:var(--image-url)] flex items-center justify-center p-4 cursor-pointer'>
<div className='flex justify-between flex-col w-full h-full'>
<div className='flex items-center'>
{city.cfp? <div className='border text-white text-md rounded-lg p-1 text-center mt-2'>cfp is open</div> :null}
<button onClick={(e) => {
e.preventDefault()
window.open(city.map, '_blank', 'noopener')
}} className='w-8 h-8 bg-white rounded-xl flex items-center justify-center ml-auto'>
<Image src='/img/mapIcon.svg' alt='Map Icon' width={24} height={24} />
</button>
</div>
<div></div>
<div className='text-white'>
<div>
{city.name=='Online'?<span className='text-lg font-bold'>{city.name} {city.country}</span>:<span className='text-lg font-bold'>{city.country}, {city.name}</span>}
</div>
<div className='flex items-center justify-between w-full'>
<div className='border border-gray-400 rounded-lg p-1 text-center mt-2'>{city.date}</div>
</div>
</div>
</div>
</div>
</Link>
);
return (
<Link href={`/venue/${city.name}`}>
<div
style={{ "--image-url": `url(${city.img})` }}
className="relative w-[300px] h-[400px] sm:w-[250px] sm:h-[350px] card-bg rounded-md bg-[image:var(--image-url)] flex items-center justify-center p-4 cursor-pointer"
>
<div className="flex justify-between flex-col w-full h-full">
<div className="flex items-center">
{city.cfp ? (
<div className="border text-white text-md rounded-lg p-1 text-center mt-2">
cfp is open
</div>
) : null}
<button
onClick={(e) => {
e.preventDefault();
window.open(city.map, "_blank", "noopener");
}}
className="w-8 h-8 bg-white rounded-xl flex items-center justify-center ml-auto"
>
<Image
src="/img/mapIcon.svg"
alt="Map Icon"
width={24}
height={24}
/>
</button>
</div>
<div></div>
<div className="text-white">
<div>
{city.name == "Online" ? (
<span className="text-lg font-bold">
{city.name} {city.country}
</span>
) : (
<span className="text-lg font-bold">
{city.country}, {city.name}
</span>
)}
</div>
<div className="flex items-center justify-between w-full">
<div className="border border-gray-400 rounded-lg p-1 text-center mt-2">
{city.date}
</div>
</div>
</div>
</div>
</div>
</Link>
);
}

export default Venue;
Loading

0 comments on commit 1b46849

Please sign in to comment.