-
-
Notifications
You must be signed in to change notification settings - Fork 90
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Changed slider.js to stop Homepage Carousel Movement for Fewer Events #…
- Loading branch information
1 parent
4ff4dfd
commit 1b46849
Showing
4 changed files
with
203 additions
and
177 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
Oops, something went wrong.