feat: handle past events

components/Venue/venue.js

@@ -3,28 +3,39 @@ import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 
+export function isEventEnded(date){
+	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-white": "text-white";
+
 	return (
 		<Link href={`/venue/${city.name}`}>
-			<div style={{'--image-url': `url(${city.img})`}}
+			<div style={{background: `linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0, .3)), url(${city.img})`, backgroundSize: "cover"}}
 				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 className='flex justify-between items-center'>
+						<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>
 							{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 className='flex align-end flex-row justify-between pt-2'>
+							<div className='inline-block border border-gray-400 rounded-lg py-1 px-2 text-center'>{city.date}</div>
+							<span className=' text-white flex align-middle pt-2' style={{ fontSize: ".9em" }}>{eventEnded ? "ENDED" : ""}</span>
 						</div>
 					</div>
 				</div>

pages/venue/[id].js

@@ -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';
 import Agenda from '../../components/Agenda/agenda';
 import Guidelines from '../../components/Speaker/guideline';
 import CFPdata from "../../config/cfp-data.json"
@@ -34,33 +35,37 @@ 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] ${city.name=='Online'?'bg-online':'bg-madrid'} bg-cover bg-center`}>
 				<div className='w-full h-full kinda-dark items-center flex flex-col justify-between'>
 					<div className='mt-[60px] container text-center flex flex-col items-center w-[1100px] lg:w-full sm:text-center'>
-						{city.name=='Online'?<Heading className='text-white'>
+						{city.name == 'Online' ? <Heading className={textColor}>
 							{city.name} {city.country}
-						</Heading>:
-						<Heading className='text-white'>
-						{city.name}, {city.country}
-					</Heading>}
+						</Heading> :
+						<Heading className={textColor}>
+							{city.name}, {city.country}
+						</Heading>}
 
-						<Paragraph className='mt-[24px]' textColor='text-white'>{city.description}</Paragraph>
+						<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 ? "Get Your Ticket" : "Register Now"}</Button>
 						</a>}
-						{city.cfp && <a href={city.name === 'online'? "/venue/online/register" :city.cfp}target={city.name=='Online'?"":'_blank'} rel='noreferrer'>
+						{(!eventEnded && city.cfp) && <a href={city.name === 'online'? "/venue/online/register" :city.cfp}target={city.name=='Online'?"":'_blank'} rel='noreferrer'>
 							<Button className="px-8 m-2 w-[250px]">Apply to be a speaker</Button>
 						</a>}
 						</div>}