first commit
Made-with: Cursor
This commit is contained in:
Michilis
162
frontend/app/events/[id]/EventDetailClient.tsx
Normal file
162
frontend/app/events/[id]/EventDetailClient.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { ArrowLeft, MapPin, Clock, Calendar, ExternalLink } from "lucide-react";
|
||||
import { api } from "@/lib/api";
|
||||
import { Navbar } from "@/components/public/Navbar";
|
||||
import { Footer } from "@/components/public/Footer";
|
||||
|
||||
function formatFullDate(dateStr: string) {
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleString("en-US", {
|
||||
weekday: "long",
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
}
|
||||
|
||||
function DateBadge({ dateStr }: { dateStr: string }) {
|
||||
const d = new Date(dateStr);
|
||||
const month = d.toLocaleString("en-US", { month: "short" }).toUpperCase();
|
||||
const day = String(d.getDate());
|
||||
return (
|
||||
<div className="bg-zinc-800 rounded-xl px-4 py-3 text-center shrink-0 min-w-[60px]">
|
||||
<span className="block text-[11px] font-bold uppercase text-primary tracking-wider leading-none mb-1">
|
||||
{month}
|
||||
</span>
|
||||
<span className="block text-3xl font-black leading-none">{day}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EventSkeleton() {
|
||||
return (
|
||||
<div className="animate-pulse max-w-3xl mx-auto">
|
||||
<div className="h-64 bg-zinc-800 rounded-2xl mb-10" />
|
||||
<div className="h-8 w-3/4 bg-zinc-800 rounded mb-4" />
|
||||
<div className="h-5 w-1/2 bg-zinc-800 rounded mb-8" />
|
||||
<div className="space-y-3">
|
||||
{[90, 80, 95, 70].map((w, i) => (
|
||||
<div key={i} className="h-4 bg-zinc-800 rounded" style={{ width: `${w}%` }} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function EventDetailClient({ id }: { id: string }) {
|
||||
const [meetup, setMeetup] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
setLoading(true);
|
||||
api
|
||||
.getMeetup(id)
|
||||
.then(setMeetup)
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, [id]);
|
||||
|
||||
const isPast = meetup ? new Date(meetup.date) < new Date() : false;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
<div className="min-h-screen">
|
||||
<div className="max-w-3xl mx-auto px-8 pt-12 pb-24">
|
||||
<Link
|
||||
href="/events"
|
||||
className="inline-flex items-center gap-2 text-on-surface-variant hover:text-primary transition-colors mb-12 text-sm font-medium"
|
||||
>
|
||||
<ArrowLeft size={16} />
|
||||
All Events
|
||||
</Link>
|
||||
|
||||
{loading && <EventSkeleton />}
|
||||
|
||||
{error && (
|
||||
<div className="bg-red-900/20 text-red-400 rounded-xl p-6 text-sm">
|
||||
Failed to load event: {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && !error && meetup && (
|
||||
<>
|
||||
{meetup.imageId && (
|
||||
<div className="rounded-2xl overflow-hidden mb-10 aspect-video bg-zinc-800">
|
||||
<img
|
||||
src={`/media/${meetup.imageId}`}
|
||||
alt={meetup.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-start gap-5 mb-8">
|
||||
<DateBadge dateStr={meetup.date} />
|
||||
<div className="min-w-0">
|
||||
{isPast && (
|
||||
<span className="inline-block text-[10px] font-bold uppercase tracking-widest text-on-surface-variant/50 bg-zinc-800 px-2.5 py-1 rounded-full mb-3">
|
||||
Past Event
|
||||
</span>
|
||||
)}
|
||||
{!isPast && (
|
||||
<span className="inline-block text-[10px] font-bold uppercase tracking-widest text-primary bg-primary/10 px-2.5 py-1 rounded-full mb-3">
|
||||
Upcoming
|
||||
</span>
|
||||
)}
|
||||
<h1 className="text-3xl md:text-4xl font-black tracking-tight leading-tight">
|
||||
{meetup.title}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-4 mb-10 text-sm text-on-surface-variant">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar size={15} className="text-primary/70 shrink-0" />
|
||||
{formatFullDate(meetup.date)}
|
||||
</div>
|
||||
{meetup.time && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock size={15} className="text-primary/70 shrink-0" />
|
||||
{meetup.time}
|
||||
</div>
|
||||
)}
|
||||
{meetup.location && (
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin size={15} className="text-primary/70 shrink-0" />
|
||||
{meetup.location}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{meetup.description && (
|
||||
<div className="prose prose-invert max-w-none mb-12">
|
||||
<p className="text-on-surface-variant leading-relaxed text-base whitespace-pre-wrap">
|
||||
{meetup.description}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{meetup.link && (
|
||||
<a
|
||||
href={meetup.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 bg-primary text-on-primary px-8 py-4 rounded-xl font-bold text-sm hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Register for this event <ExternalLink size={16} />
|
||||
</a>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
86
frontend/app/events/[id]/page.tsx
Normal file
86
frontend/app/events/[id]/page.tsx
Normal file
@@ -0,0 +1,86 @@
|
||||
import type { Metadata } from "next";
|
||||
import EventDetailClient from "./EventDetailClient";
|
||||
import { EventJsonLd, BreadcrumbJsonLd } from "@/components/public/JsonLd";
|
||||
|
||||
const apiUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:4000/api";
|
||||
|
||||
async function fetchEvent(id: string) {
|
||||
try {
|
||||
const res = await fetch(`${apiUrl}/meetups/${id}`, {
|
||||
next: { revalidate: 300 },
|
||||
});
|
||||
if (!res.ok) return null;
|
||||
return res.json();
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
interface Props {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
||||
const { id } = await params;
|
||||
const event = await fetchEvent(id);
|
||||
if (!event) {
|
||||
return { title: "Event Not Found" };
|
||||
}
|
||||
|
||||
const description =
|
||||
event.description?.slice(0, 160) ||
|
||||
`Bitcoin meetup: ${event.title}${event.location ? ` in ${event.location}` : ""}. Organized by the Belgian Bitcoin Embassy.`;
|
||||
|
||||
const ogImage = event.imageId
|
||||
? `/media/${event.imageId}`
|
||||
: `/og?title=${encodeURIComponent(event.title)}&type=event`;
|
||||
|
||||
return {
|
||||
title: event.title,
|
||||
description,
|
||||
openGraph: {
|
||||
type: "article",
|
||||
title: event.title,
|
||||
description,
|
||||
images: [{ url: ogImage, width: 1200, height: 630, alt: event.title }],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: event.title,
|
||||
description,
|
||||
images: [ogImage],
|
||||
},
|
||||
alternates: { canonical: `/events/${id}` },
|
||||
};
|
||||
}
|
||||
|
||||
export default async function EventDetailPage({ params }: Props) {
|
||||
const { id } = await params;
|
||||
const event = await fetchEvent(id);
|
||||
const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://belgianbitcoinembassy.org";
|
||||
|
||||
return (
|
||||
<>
|
||||
{event && (
|
||||
<>
|
||||
<EventJsonLd
|
||||
name={event.title}
|
||||
description={event.description}
|
||||
startDate={event.date}
|
||||
location={event.location}
|
||||
url={`${siteUrl}/events/${id}`}
|
||||
imageUrl={event.imageId ? `${siteUrl}/media/${event.imageId}` : undefined}
|
||||
/>
|
||||
<BreadcrumbJsonLd
|
||||
items={[
|
||||
{ name: "Home", href: "/" },
|
||||
{ name: "Events", href: "/events" },
|
||||
{ name: event.title, href: `/events/${id}` },
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<EventDetailClient id={id} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user