feat: add events

This commit is contained in:
Nazareno Oviedo 2022-04-13 14:39:25 -03:00
parent 5157ae68e2
commit eeab609e7b
2 changed files with 21 additions and 31 deletions

View File

@ -1,42 +1,42 @@
export const events = [
{
location: 'California, US',
date: '01.31.22',
time: '20:30',
location: 'París, France',
date: '04.13.22',
time: '08:00',
imgSrc: '/images/community/events/card01.png',
title: 'ETH Denver',
title: 'Paris Blockchain Week',
preview:
'Sit sed dolor felis quis. Porttitor semper enim placerat luctus purus aliquam. Diam eu varius donec sit urna feugiat libero diam augue.',
link: 'https://google.com'
'PBW is the flagship event of Paris Blockchain Week gathering more than 3000 attendees, 70 sponsors, 250 speakers and 100 media partners.',
link: 'https://www.pbwsummit.com/'
},
{
location: 'San Francisco, US',
date: '04.25.22',
time: '19:30',
location: 'Amsterdam, Netherlands',
date: '04.18.22',
time: '09:00',
imgSrc: '/images/community/events/card02.png',
title: 'Devconnect',
preview:
'Sit sed dolor felis quis. Porttitor semper enim placerat luctus purus aliquam. Diam eu varius donec sit urna feugiat libero diam augue.',
link: 'https://google.com'
'Devconnect is a week-long in-person gathering that will feature independent Ethereum events, each with a unique focus.',
link: 'https://devconnect.org/'
},
{
location: 'Paris, FR',
date: '06.25.22',
time: '19:30',
location: 'Austin, TX',
date: '06.09.22',
time: '09:00',
imgSrc: '/images/community/events/card03.png',
title: 'Paris Blockchain Week',
title: 'Consensus',
preview:
'Sit sed dolor felis quis. Porttitor semper enim placerat luctus purus aliquam. Diam eu varius donec sit urna feugiat libero diam augue.',
link: 'https://google.com'
'Consensus, the most influential crypto & blockchain experience of the year since 2015, will return to an in-person format and be held in Austin, Texas, for the first time ever.',
link: 'https://events.coindesk.com/consensus2022'
},
{
location: 'Amsterdam, NL',
date: '08.25.22',
date: '07.19.22',
time: '19:30',
imgSrc: '/images/community/events/card04.png',
title: 'ETHCC',
title: 'ETH CC',
preview:
'Sit sed dolor felis quis. Porttitor semper enim placerat luctus purus aliquam. Diam eu varius donec sit urna feugiat libero diam augue.',
link: 'https://google.com'
'The Ethereum Community Conference (EthCC) is the largest annual European Ethereum event focused on technology and community.',
link: 'https://ethcc.io/'
}
]

View File

@ -14,21 +14,13 @@ import { events } from './events'
import s from './events.module.scss'
const Events = () => {
const [currentSlide, setCurrentSlide] = useState(0)
const [loaded, setLoaded] = useState(false)
const [slideHasEnded, setSlideHasEnded] = useState(false)
const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
initial: 0,
loop: true,
mode: 'free-snap',
slides: { perView: 3.915, spacing: 24 },
slideChanged(slider) {
setCurrentSlide(slider.track.details.rel)
},
detailsChanged: (slider) => {
setSlideHasEnded(slider.track.details.progress >= 1 ? true : false)
},
created() {
setLoaded(true)
},
@ -72,14 +64,12 @@ const Events = () => {
onClick={(e: any) =>
e.stopPropagation() || slider.current?.prev()
}
disabled={currentSlide === 0}
className={s['arrow']}
/>
<ArrowSlider
onClick={(e: any) =>
e.stopPropagation() || slider.current?.next()
}
disabled={slideHasEnded}
className={s['arrow']}
/>
</div>