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.

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

feat: handle past events #289

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
23 changes: 18 additions & 5 deletions components/Venue/venue.js
Original file line number Diff line number Diff line change
@@ -1,26 +1,38 @@
/* eslint-disable react/no-unescaped-entities */
import React from 'react';

function isEventEnded(date){
monoMonu marked this conversation as resolved.
Show resolved Hide resolved
const eventDate = date.split(" ");
const month = eventDate[0];
const year = eventDate[eventDate.length-1];
const startDay = eventDate[1].split("-")[0];
return new Date(`${startDay} ${month} ${year}`) < Date.now()
}


function Venue({ className, city }) {

const eventEnded = isEventEnded(city.date);
const textColor = eventEnded ? "text-gray-300": "text-white";

return (
<div>
<div style={{'--image-url': `url(${city.img})`}}
className='relative w-[300px] h-[400px] sm:w-[250px] sm:h-[350px] card-bg 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 justify-between items-center'>
<div><div className={`border text-white text-md rounded-lg p-1 text-center mt-2 ${city.cfp ? 'block': 'hidden' }`}>cfp is open</div></div>
<div><div className={`border ${textColor} text-md rounded-lg p-1 text-center mt-2 ${city.cfp ? 'block': 'hidden' }`}>cfp is open</div></div>
<a href={city.map} target='_blank' className='w-8 h-8 bg-white rounded-xl flex items-center justify-center' rel="noreferrer">
<img src='/img/mapIcon.svg' className='w-6' />
</a>
</div>
<div></div>
<div className='text-white'>
<div className={textColor}>
<div>
<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 className='inline-block border border-gray-400 rounded-lg py-1 px-2 text-center mt-2'>{city.date}</div>
<span className='text-xs text-white'> - {eventEnded ? "ENDED" : "UPCOMING"}</span>
</div>
</div>
</div>
Expand All @@ -29,3 +41,4 @@ function Venue({ className, city }) {
}

export default Venue;
export {isEventEnded}
16 changes: 11 additions & 5 deletions pages/venue/[id].js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Heading from '../../components/Typography/heading';
import Paragraph from '../../components/Typography/paragraph';
import speakers from '../../config/speakers.json';
import Sponsors from '../../components/Sponsors/sponsors';
import { isEventEnded } from '../../components/Venue/venue';

export async function getStaticProps({ params }) {
let res = {};
Expand All @@ -32,29 +33,34 @@ export async function getStaticPaths() {
}

function Venue({ city }) {

const eventEnded = isEventEnded(city.date);
const textColor = eventEnded ? "text-gray-400": "text-white";

return (
<div>
<div className='w-full h-[500px] sm:h-[auto] bg-madrid bg-cover bg-center'>
<div className='w-full h-full kinda-dark items-center flex flex-col justify-between'>
<div className='mt-[82px] container text-center flex flex-col items-center w-[1100px] lg:w-full sm:text-center'>
<Heading className='text-white'>
<Heading className={textColor}>
{city.name}, {city.country}
</Heading>
<Paragraph className='mt-[24px]' textColor='text-white'>{city.description}</Paragraph>
{eventEnded && <p className='text-xs text-white border border-white py-1 px-2'>ENDED</p>}
<Paragraph className='mt-[24px]' textColor={textColor}>{city.description}</Paragraph>

<Heading typeStyle='lg' className='text-white mt-[24px] hover:underline'>
<Heading typeStyle='lg' className={`${textColor} mt-[24px] hover:underline`}>
<a href={city.map} target='_blank' rel="noreferrer">
{city.address}
</a>
</Heading>
<Heading typeStyle='lg' className='text-white mt-[24px]'>
<Heading typeStyle='lg' className={`${textColor} mt-[24px]`}>
{city.date}
</Heading>
{city.ended ? "" : <div className='m-[30px]'>
{city.ticket && <a href={city.ticket} target='_blank' rel='noreferrer'>
<Button className="px-8 m-2 w-[250px]">{city.isFree ? "Register for free" : "Register now"}</Button>
</a>}
{city.cfp && <a href={city.cfp} target='_blank' rel='noreferrer'>
{(!eventEnded && city.cfp) && <a href={city.cfp} target='_blank' rel='noreferrer'>
<Button className="px-8 m-2 w-[250px]">Apply to be a speaker</Button>
</a>}
</div>}
Expand Down
Loading