From 71ec2f2ff24e72f7636e7c23eae116ea2018475b Mon Sep 17 00:00:00 2001 From: Akshay Date: Mon, 24 Nov 2025 11:02:44 +0530 Subject: [PATCH] feat: Enhance event and hackathon status badge styling and capitalization, and refine event detail page UI. --- app/events/[slug]/page.tsx | 101 ++++++++------- app/events/page.tsx | 234 ++++++++++++++++----------------- app/hackathons/[id]/page.tsx | 245 ++++++++++++++++++----------------- app/hackathons/page.tsx | 13 +- 4 files changed, 302 insertions(+), 291 deletions(-) diff --git a/app/events/[slug]/page.tsx b/app/events/[slug]/page.tsx index 9d270daf..a82fcd12 100644 --- a/app/events/[slug]/page.tsx +++ b/app/events/[slug]/page.tsx @@ -5,13 +5,13 @@ import { useParams } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" -import { - Calendar, - Clock, - MapPin, - Users, - DollarSign, - CheckCircle, +import { + Calendar, + Clock, + MapPin, + Users, + DollarSign, + CheckCircle, XCircle, ArrowLeft, ExternalLink, @@ -89,11 +89,11 @@ export default function EventPage() { const [copied, setCopied] = useState(false) const [registering, setRegistering] = useState(false) - const { - isRegistered, - registration, - loading: statusLoading, - refetch: refetchStatus + const { + isRegistered, + registration, + loading: statusLoading, + refetch: refetchStatus } = useRegistrationStatus('event', event?.id?.toString() || '') // Track analytics @@ -109,11 +109,11 @@ export default function EventPage() { try { setLoading(true) const response = await fetch(`/api/events/${slug}`) - + if (!response.ok) { throw new Error('Event not found') } - + const data = await response.json() setEvent(data) } catch (err) { @@ -208,9 +208,12 @@ export default function EventPage() { const getStatusColor = (status: string) => { switch (status.toLowerCase()) { case 'live': - return 'bg-green-100 text-green-800 border-green-200' case 'published': - return 'bg-blue-100 text-blue-800 border-blue-200' + return 'bg-gradient-to-r from-green-500 to-emerald-600 text-white border-0' + case 'upcoming': + return 'bg-gradient-to-r from-blue-500 to-cyan-600 text-white border-0' + case 'ongoing': + return 'bg-gradient-to-r from-purple-500 to-violet-600 text-white border-0' case 'draft': return 'bg-gray-100 text-gray-800 border-gray-200' default: @@ -220,7 +223,7 @@ export default function EventPage() { const getPaymentBadge = () => { if (!event) return null - + if (event.payment === 'Required' || event.payment === 'Paid') { return ( @@ -229,9 +232,9 @@ export default function EventPage() { ) } - + return ( - + Free Event @@ -288,8 +291,8 @@ export default function EventPage() { return (
- -
+ +
{/* Back Button */} - @@ -318,13 +321,13 @@ export default function EventPage() { {/* Background decoration */}
- +
- {event.status} + {event.status.charAt(0).toUpperCase() + event.status.slice(1)} {getPaymentBadge()} {event.featured && ( @@ -340,9 +343,9 @@ export default function EventPage() { {event.company ? (
Hosted by -
@@ -363,7 +366,7 @@ export default function EventPage() {
- +
@@ -372,15 +375,15 @@ export default function EventPage() {

Date

-

{new Date(event.date).toLocaleDateString('en-US', { - weekday: 'long', - year: 'numeric', - month: 'long', - day: 'numeric' +

{new Date(event.date).toLocaleDateString('en-US', { + weekday: 'long', + year: 'numeric', + month: 'long', + day: 'numeric' })}

- +
@@ -390,7 +393,7 @@ export default function EventPage() {

{event.time}

- +
@@ -400,7 +403,7 @@ export default function EventPage() {

{event.location}

- + )} - + {event.payment === 'Required' || event.payment === 'Paid' ? (

Secure payment powered by Razorpay @@ -734,7 +737,7 @@ export default function EventPage() {

- +
) diff --git a/app/events/page.tsx b/app/events/page.tsx index e57d6783..f2262a15 100644 --- a/app/events/page.tsx +++ b/app/events/page.tsx @@ -1,4 +1,4 @@ -"use client" +"use client" import React, { useState, useEffect, useRef } from "react" @@ -24,7 +24,7 @@ import type { Company } from "@/types/company" const eventCategories = [ "All", "Workshop", - "Conference", + "Conference", "Meetup", "Webinar", "Training", @@ -55,7 +55,7 @@ export default function EventsPage() { company_industry: selectedIndustry !== "All" ? selectedIndustry : undefined, company_size: selectedCompanySize !== "All" ? selectedCompanySize : undefined }), [searchTerm, selectedCategory, dateFilter, selectedCompany, selectedIndustry, selectedCompanySize]) - + // Use custom hooks for data fetching const { data: eventsData, loading: eventsLoading, error: eventsError } = useEvents(eventsParams) @@ -71,7 +71,7 @@ export default function EventsPage() { if (response.ok) { const data = await response.json() setCompanies(data.companies || []) - + // Extract unique industries from companies const uniqueIndustries = Array.from( new Set(data.companies.map((c: Company) => c.industry).filter(Boolean)) @@ -88,7 +88,7 @@ export default function EventsPage() { // Extract events from the response const events = eventsData?.events || [] const isLoading = eventsLoading || featuredLoading - + // Debug logging console.log('Events Page Debug:', { eventsLoading, @@ -204,11 +204,14 @@ export default function EventsPage() { } const getStatusColor = (status: string) => { - switch (status) { - case "upcoming": + switch (status.toLowerCase()) { + case "live": + case "published": return "bg-gradient-to-r from-green-500 to-emerald-600 text-white" - case "ongoing": + case "upcoming": return "bg-gradient-to-r from-blue-500 to-cyan-600 text-white" + case "ongoing": + return "bg-gradient-to-r from-purple-500 to-violet-600 text-white" case "completed": return "bg-gradient-to-r from-gray-500 to-slate-600 text-white" case "cancelled": @@ -228,7 +231,7 @@ export default function EventsPage() { } console.log('About to check isLoading:', isLoading) - + if (isLoading) { console.log('Rendering loading spinner') return ( @@ -240,103 +243,103 @@ export default function EventsPage() {
) } - + console.log('Rendering main content with', events.length, 'events') return (
-
- +
+ {/* Hero Section */}
-
-
-
-
-
-
-
- - -
- -
- -
- - - Learn, Network,{" "} - - Grow - - - - Discover amazing events, workshops, and conferences. Connect with industry experts, learn new skills, and expand your professional network! - -
- -
+
+
+
+
+
+
+
+ + +
+ +
+ +
+ + + Learn, Network,{" "} + + Grow + + + + Discover amazing events, workshops, and conferences. Connect with industry experts, learn new skills, and expand your professional network! + +
+ + {/* Search and Filters */}
@@ -434,7 +437,7 @@ export default function EventsPage() { {/* All Events */}
- - {event.status} + {event.status.charAt(0).toUpperCase() + event.status.slice(1)}
@@ -518,9 +521,9 @@ export default function EventsPage() { {/* Company Badge */} {event.company ? (
-
@@ -550,7 +553,7 @@ export default function EventsPage() { {event.registered}/{event.capacity}
- + {/* Payment Information */}
@@ -559,13 +562,12 @@ export default function EventsPage() { {event.payment === 'Required' || event.payment === 'Paid' ? event.price : 'Free'}
- {event.payment === 'Required' || event.payment === 'Paid' ? 'Paid' : 'Free'} @@ -605,7 +607,7 @@ export default function EventsPage() {
{eventsError && ( - -