Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: stop carousel from scrolling with few events (#397) #410

Closed
wants to merge 2 commits into from
Closed

fix: stop carousel from scrolling with few events (#397) #410

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b46849
Changed slider.js to stop Homepage Carousel Movement for Fewer Events…
yashsaraswat2004 Oct 4, 2024
8cf663e
Merge branch 'master' into master
AceTheCreator Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
220 changes: 111 additions & 109 deletions components/Countdown/countdown.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading