From 8d04e3986eacfd0880721aeb16da9ad33b7558c2 Mon Sep 17 00:00:00 2001
From: r3yc0n1c <raja.majumdar.01@gmail.com>
Date: Sun, 1 Dec 2024 23:15:50 +0530
Subject: [PATCH] fix: venue card layout and event status

---
 components/Venue/venue.js | 25 +++++++++++++++++--------
 config/city-lists.json    |  4 ++--
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/components/Venue/venue.js b/components/Venue/venue.js
index e3586677..bc24eb5d 100644
--- a/components/Venue/venue.js
+++ b/components/Venue/venue.js
@@ -3,19 +3,28 @@ 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()
+export function getEventStatus(date){
+	const today = new Date();
+    const event = new Date(date);
+
+    if (event.toDateString() === today.toDateString()) {
+        return "Ongoing";
+    } else if (event > today) {
+        return "Upcoming";
+    } else {
+        return "Ended";
+    }
 }
 
+export function isEventEnded(date){
+	return getEventStatus(date) === "Ended";
+}
 
 function Venue({ className, city }) {
 
 	const eventEnded = isEventEnded(city.date);
 	const textColor = eventEnded ? "text-white": "text-white";
+	const eventStatus = getEventStatus(city.date);
 
 	return (
 		<Link href={`/venue/${city.name}`}>
@@ -37,8 +46,8 @@ function Venue({ className, city }) {
 							{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 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 className='inline-block border border-gray-400 rounded-lg py-1 px-2 text-center sm:text-sm text-base'>{city.date}</div>
+							<span className=' text-white flex align-middle pt-2 sm:text-[0.8rem] sm:leading-4 text-base'>{eventStatus}</span>
 						</div>
 					</div>
 				</div>
diff --git a/config/city-lists.json b/config/city-lists.json
index b49501a9..3af74914 100644
--- a/config/city-lists.json
+++ b/config/city-lists.json
@@ -2,7 +2,7 @@
 	{
 		"name": "Online",
 		"country": " Edition",
-		"date": "30th October 2024",
+		"date": "October 30, 2024",
 		"cfpdate":"Not announced yet",
 		"description": "Join us for the AsyncAPI Online Conference Edition as the community unites across the globe to share experiences, collaborate, and foster meaningful connections.",
 		"img": "/img/testMic.webp",
@@ -21,7 +21,7 @@
 	{
 		"name": "Helsinki",
 		"country": "Finland",
-		"date": "May 29 2024",
+		"date": "May 29, 2024",
 		"cfpdate":"Not announced yet",
 		"description": "Join us in Helsinki for the AsyncAPI Conference, where we will explore all things AsyncAPI and connect physical and digital worlds. Get excited as we delve into sustainable APIs for the Era of AI, Data Platforms, and Quantum Computing!.",
 		"img": "/img/finland.webp",