From 671a4f596be6c7cd3948f1475cc070ae26d6b410 Mon Sep 17 00:00:00 2001 From: arraysid Date: Tue, 27 May 2025 04:28:44 +0700 Subject: [PATCH] feat: implement EventsPage component with event listing and details --- apps/landing/src/app/(public)/events/page.tsx | 193 +++++++++++++++++- apps/landing/src/data/events.json | 46 +++++ 2 files changed, 234 insertions(+), 5 deletions(-) create mode 100644 apps/landing/src/data/events.json diff --git a/apps/landing/src/app/(public)/events/page.tsx b/apps/landing/src/app/(public)/events/page.tsx index eab6ef4..4e2712b 100644 --- a/apps/landing/src/app/(public)/events/page.tsx +++ b/apps/landing/src/app/(public)/events/page.tsx @@ -1,9 +1,192 @@ -import { Metadata } from 'next'; +'use client'; -export const metadata: Metadata = { - title: 'IMPHNEN - Event', +import events from '@/data/events.json'; +import { buttonVariants } from '@components'; +import { cn } from '@utils'; +import Image from 'next/image'; +import { HiCalendar, HiClock, HiLocationMarker } from 'react-icons/hi'; + +const formatDate = (dateString: string) => { + const date = new Date(dateString); + return date.toLocaleDateString('id-ID', { + day: 'numeric', + month: 'long', + year: 'numeric', + }); }; -export default function Page() { - return <>; +const formatTime = (dateString: string) => { + const date = new Date(dateString); + return date.toLocaleTimeString('id-ID', { + hour: '2-digit', + minute: '2-digit', + timeZone: 'Asia/Jakarta', + }); +}; + +const getEventStatus = (endDate: string) => { + const now = new Date(); + const end = new Date(endDate); + return end > now ? 'upcoming' : 'past'; +}; + +export default function EventsPage() { + const sortedEvents = [...events].sort( + (a, b) => + new Date(b.start_date).getTime() - new Date(a.start_date).getTime() + ); + + return ( +
+
+ {/* Featured Card */} +
+
+
+
+ {sortedEvents[0].name} +
+
+
+ + Event Terbaru + + + {getEventStatus(sortedEvents[0].end_date) === 'upcoming' + ? 'Upcoming' + : 'Selesai'} + +
+

+ {sortedEvents[0].name} +

+
+
+ + {formatDate(sortedEvents[0].start_date)} +
+
+ + + {formatTime(sortedEvents[0].start_date)} -{' '} + {formatTime(sortedEvents[0].end_date)} WIB + +
+
+ + + {sortedEvents[0].type === 'online' + ? 'Online' + : sortedEvents[0].location} + +
+ {sortedEvents[0].price > 0 && ( +
+ Rp {sortedEvents[0].price.toLocaleString('id-ID')} +
+ )} +
+

+ {sortedEvents[0].description} +

+ + Lihat Detail + +
+
+
+
+ + {/* Regular Cards */} + {sortedEvents.slice(1).map((event) => ( +
+
+ {event.name} +
+
+
+ + {getEventStatus(event.end_date) === 'upcoming' + ? 'Upcoming' + : 'Selesai'} + +
+

+ {event.name} +

+
+
+ + {formatDate(event.start_date)} +
+
+ + + {event.type === 'online' ? 'Online' : event.location} + +
+ {event.price > 0 && ( +
+ Rp {event.price.toLocaleString('id-ID')} +
+ )} +
+

+ {event.description} +

+ + Lihat Detail + +
+
+ ))} +
+
+ ); } diff --git a/apps/landing/src/data/events.json b/apps/landing/src/data/events.json new file mode 100644 index 0000000..9778e48 --- /dev/null +++ b/apps/landing/src/data/events.json @@ -0,0 +1,46 @@ +[ + { + "name": "IMPHNEN X GDG Medan", + "description": "Join us for the Google Cloud Roadshow: Build with AI in Medan! This is your chance to dive deep into the latest advancements in cloud technology and AI, guided by industry experts.", + "start_date": "2025-04-26T13:00:00+07:00", + "end_date": "2025-04-26T17:00:00+07:00", + "thumbnail": "https://scontent.fsoc1-2.fna.fbcdn.net/v/t39.30808-6/492363939_2132158393873766_2304913620264481070_n.jpg?_nc_cat=105&ccb=1-7&_nc_sid=127cfc&_nc_eui2=AeFe43oCdy2FOIVI6pr_grkO_q5XyVVxt5v-rlfJVXG3m9KgINIp9lo_vzXP4CtAAFJviDNJdDPaPyGnz7B8-gfE&_nc_ohc=bv3GExoL4pUQ7kNvwEpV7xQ&_nc_oc=Adk45dIpzgFxCHgtQKDTo99Sewj0ZMO4LX1cNEI2Dj7VeQDp8jd1RzYnG_UwsKkaTug&_nc_zt=23&_nc_ht=scontent.fsoc1-2.fna&_nc_gid=ZPKg-Y9FLRXcDiSak5WcLA&oh=00_AfL7BFg5g-q6MALMRFUlgaUWK8jHxQVTHdZ_1ezxBthXfw&oe=68354615", + "type": "onsite", + "price": 0, + "location": "Magnificient, Medan", + "detail_link": "https://n8n.gdgmedan.com/form/8466f60d-94b0-42a6-93aa-8738ae4ab5df?fbclid=IwY2xjawKcQoNleHRuA2FlbQIxMABicmlkETFnQ1RvSU5aWVhpWldaOXBjAR7LUWa_npCLb-QSfk1QFTl12tyw_eBhNO8oI8N2LvhwweeE5_41uQsARsEQGw_aem_1IP2vqrQcvjsvLCBy2C6Hg" + }, + { + "name": "IMPHNEN X Connect Citcom", + "description": "Unleash the Future with AI: Decode the potential of artificial intelligence to revolutionize your strategies, unchain innovation, and gain a powerful competitive edge in today's fast-evolving business landscape. Harness the transformative capabilities of AI to outsmart competitors, optimize operations, and drive sustainable growth.", + "start_date": "2025-04-22T13:00:00+07:00", + "end_date": "2025-04-22T17:00:00+07:00", + "thumbnail": "https://scontent.fsoc1-2.fna.fbcdn.net/v/t39.30808-6/490432625_2122941998128739_5372979458124718061_n.jpg?stp=dst-jpg_p526x296_tt6&_nc_cat=105&ccb=1-7&_nc_sid=aa7b47&_nc_eui2=AeGc_W_0Gd3XY9X9ImKz1h1HpYKlinPYX-qlgqWKc9hf6k75HObQiJ8A8m6BZOIe2OrVQjjyXnHq08Rc4JuQWeCQ&_nc_ohc=uoSae0n37k0Q7kNvwHch8E5&_nc_oc=AdngSKtrCdZ4H3hlHh-9cttOnaKyrwiFEcm88kjp0gaflvQ65LUp4OT45-XVGDAoIo8&_nc_zt=23&_nc_ht=scontent.fsoc1-2.fna&_nc_gid=YGkoLGAxNuB0uF3C9hSYGQ&oh=00_AfLRkrzG7DRYa3HRuy9aXfUfG6zLkRBDj9LxqXKOfF9x7Q&oe=683546E0", + "type": "onsite", + "price": 0, + "location": "El Hotel, Bandung", + "detail_link": "/events/1" + }, + { + "name": "JVM Meetup #64", + "description": "Join us for an insightful talk where we’ll explore how AI is reshaping the payment industry. Whether you’re into tech, AI, or just curious about the future of transactions, this is a must-attend event!", + "start_date": "2025-04-30T13:00:00+07:00", + "end_date": "2025-04-30T17:00:00+07:00", + "thumbnail": "https://scontent.fsoc1-1.fna.fbcdn.net/v/t39.30808-6/494158983_2136830150073257_5259003432367969457_n.jpg?_nc_cat=100&ccb=1-7&_nc_sid=833d8c&_nc_eui2=AeGcneO8ihnXyQ_7WV93z7Onz0UPVTr-bf_PRQ9VOv5t_wI-el8xouZ-Z4TKGMMlBPi21d9AA55SP54MHkzO4rx1&_nc_ohc=3Q9NKGIkpT4Q7kNvwHKzwXr&_nc_oc=AdkRJ--zwRGcfX_F2eIgx0qhK-N3OkhwqRwujFhgSRWy5mH_SdIyBmwW8PHHXp71ZUM&_nc_zt=23&_nc_ht=scontent.fsoc1-1.fna&_nc_gid=Xi30SjzSBAU1XN9rRxp0VA&oh=00_AfKvjd9LTMfOwfPLD43U8lKYEr4KABecj336J8hAY8ekMg&oe=68353105", + "type": "onsite", + "price": 0, + "location": "El Hotel, Bandung", + "detail_link": "https://lu.ma/422jkgz0?utm_campaign=jvmmeetup&utm_medium=social%2C%20event%2C%20meetup&utm_source=google%2C%20facebook%2C%20linkedin%2C%20instagram" + }, + { + "name": "JVM Meetup #65", + "description": "Di era digital yang terus berkembang, Artificial Intelligence (AI) bukan lagi teknologi masa depantapi alat bantu masa kini yang siap mendongkrak efisiensi, kreativitas, dan produktivitas kita semua, terutama para penggiat IT dan pelaku usaha!", + "start_date": "2025-05-15T13:00:00+07:00", + "end_date": "2025-05-15T17:00:00+07:00", + "thumbnail": "https://scontent.fsoc1-1.fna.fbcdn.net/v/t39.30808-6/495382435_2144684952621110_8304851620615091109_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=833d8c&_nc_eui2=AeHwnU4KixfUsslo3M90ahT8GwMEI7zWSnQbAwQjvNZKdP3RHiUjdDZtuF1dIMvorL0nW0rDGOD6tPDi0i9ERK96&_nc_ohc=R1NyXnu-FKEQ7kNvwGbO-iN&_nc_oc=Adluf-uw1tmzkNME9vNhwkTv5-x_GHMfsLj1bzGyYds_ODq3UnWMq2DthyUisF9e3gU&_nc_zt=23&_nc_ht=scontent.fsoc1-1.fna&_nc_gid=kykMk9nPtcrtk-InL6tF6w&oh=00_AfLZSrEPpV83lVFRMz19n9RzfnsM4o7K7TijpdAjWYViiA&oe=6835231B", + "type": "onsite", + "price": 0, + "location": "Telkom Landmark Tower (Lt.31)", + "detail_link": "s.id/jvm65" + } +]