first commit

Made-with: Cursor

frontend/app/events/[id]/EventDetailClient.tsx

@@ -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 />
+    </>
+  );
+}

frontend/app/events/[id]/page.tsx

@@ -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} />
+    </>
+  );
+}

frontend/app/events/layout.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Events - Bitcoin Meetups in Belgium",
+  description:
+    "Browse upcoming and past Bitcoin meetups in Belgium organized by the Belgian Bitcoin Embassy. Monthly gatherings for education and community.",
+  openGraph: {
+    title: "Events - Belgian Bitcoin Embassy",
+    description:
+      "Upcoming and past Bitcoin meetups in Belgium. Join the community.",
+  },
+  alternates: { canonical: "/events" },
+};
+
+export default function EventsLayout({ children }: { children: React.ReactNode }) {
+  return children;
+}

frontend/app/events/page.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { MapPin, Clock, ArrowRight } from "lucide-react";
+import { api } from "@/lib/api";
+import { Navbar } from "@/components/public/Navbar";
+import { Footer } from "@/components/public/Footer";
+
+function formatMeetupDate(dateStr: string) {
+  const d = new Date(dateStr);
+  return {
+    month: d.toLocaleString("en-US", { month: "short" }).toUpperCase(),
+    day: String(d.getDate()),
+    full: d.toLocaleString("en-US", {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+      year: "numeric",
+    }),
+  };
+}
+
+function MeetupCard({ meetup, muted = false }: { meetup: any; muted?: boolean }) {
+  const { month, day, full } = formatMeetupDate(meetup.date);
+  return (
+    <Link
+      href={`/events/${meetup.id}`}
+      className={`group flex flex-col bg-zinc-900 border rounded-xl p-6 hover:-translate-y-0.5 hover:shadow-xl transition-all duration-200 ${
+        muted
+          ? "border-zinc-800/60 opacity-70 hover:opacity-100 hover:border-zinc-700"
+          : "border-zinc-800 hover:border-zinc-700"
+      }`}
+    >
+      <div className="flex items-start gap-4 mb-4">
+        <div className={`rounded-lg px-3 py-2 text-center shrink-0 min-w-[52px] ${muted ? "bg-zinc-800/60" : "bg-zinc-800"}`}>
+          <span className={`block text-[10px] font-bold uppercase tracking-wider leading-none mb-0.5 ${muted ? "text-on-surface-variant/50" : "text-primary"}`}>
+            {month}
+          </span>
+          <span className="block text-2xl font-black leading-none">{day}</span>
+        </div>
+        <div className="min-w-0">
+          <h3 className="font-bold text-base leading-snug group-hover:text-primary transition-colors">
+            {meetup.title}
+          </h3>
+          <p className="text-on-surface-variant/60 text-xs mt-1">{full}</p>
+        </div>
+      </div>
+
+      {meetup.description && (
+        <p className="text-on-surface-variant text-sm leading-relaxed mb-4 flex-1 line-clamp-2">
+          {meetup.description}
+        </p>
+      )}
+
+      <div className="flex flex-col gap-1.5 mt-auto pt-4 border-t border-zinc-800/60">
+        {meetup.location && (
+          <p className="flex items-center gap-1.5 text-xs text-on-surface-variant/60">
+            <MapPin size={12} className={`shrink-0 ${muted ? "text-on-surface-variant/40" : "text-primary/60"}`} />
+            {meetup.location}
+          </p>
+        )}
+        {meetup.time && (
+          <p className="flex items-center gap-1.5 text-xs text-on-surface-variant/60">
+            <Clock size={12} className={`shrink-0 ${muted ? "text-on-surface-variant/40" : "text-primary/60"}`} />
+            {meetup.time}
+          </p>
+        )}
+      </div>
+
+      <span className={`flex items-center gap-1.5 text-xs font-semibold mt-4 group-hover:gap-2.5 transition-all ${muted ? "text-on-surface-variant/50" : "text-primary"}`}>
+        View Details <ArrowRight size={12} />
+      </span>
+    </Link>
+  );
+}
+
+function CardSkeleton() {
+  return (
+    <div className="bg-zinc-900 border border-zinc-800 rounded-xl p-6 animate-pulse">
+      <div className="flex items-start gap-4 mb-4">
+        <div className="bg-zinc-800 rounded-lg w-[52px] h-[58px] shrink-0" />
+        <div className="flex-1 space-y-2">
+          <div className="h-4 bg-zinc-800 rounded w-3/4" />
+          <div className="h-3 bg-zinc-800 rounded w-1/2" />
+        </div>
+      </div>
+      <div className="space-y-2 mb-4">
+        <div className="h-3 bg-zinc-800 rounded w-full" />
+        <div className="h-3 bg-zinc-800 rounded w-5/6" />
+      </div>
+    </div>
+  );
+}
+
+export default function EventsPage() {
+  const [meetups, setMeetups] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    api
+      .getMeetups()
+      .then((data: any) => {
+        const list = Array.isArray(data) ? data : [];
+        setMeetups(list);
+      })
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const now = new Date();
+  const upcoming = meetups.filter((m) => new Date(m.date) >= now);
+  const past = meetups.filter((m) => new Date(m.date) < now).reverse();
+
+  return (
+    <>
+      <Navbar />
+      <div className="min-h-screen">
+        <header className="pt-24 pb-12 px-8">
+          <div className="max-w-6xl mx-auto">
+            <p className="uppercase tracking-[0.2em] text-primary mb-2 font-semibold text-xs">
+              Belgian Bitcoin Embassy
+            </p>
+            <h1 className="text-4xl md:text-6xl font-black tracking-tighter mb-4">
+              All Events
+            </h1>
+            <p className="text-on-surface-variant max-w-md leading-relaxed">
+              Past and upcoming Bitcoin meetups in Belgium.
+            </p>
+          </div>
+        </header>
+
+        <div className="max-w-6xl mx-auto px-8 pb-24 space-y-20">
+          {error && (
+            <div className="bg-red-900/20 text-red-400 rounded-xl p-6 text-sm">
+              Failed to load events: {error}
+            </div>
+          )}
+
+          <div>
+            <h2 className="text-xl font-black mb-8 flex items-center gap-3">
+              Upcoming
+              {!loading && upcoming.length > 0 && (
+                <span className="text-xs font-bold bg-primary/10 text-primary px-2.5 py-1 rounded-full">
+                  {upcoming.length}
+                </span>
+              )}
+            </h2>
+
+            {loading ? (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+                {[0, 1, 2].map((i) => <CardSkeleton key={i} />)}
+              </div>
+            ) : upcoming.length === 0 ? (
+              <div className="border border-zinc-800/60 rounded-xl px-8 py-12 text-center">
+                <p className="text-on-surface-variant text-sm">
+                  No upcoming events scheduled. Check back soon.
+                </p>
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+                {upcoming.map((m) => <MeetupCard key={m.id} meetup={m} />)}
+              </div>
+            )}
+          </div>
+
+          {(loading || past.length > 0) && (
+            <div>
+              <h2 className="text-xl font-black mb-8 text-on-surface-variant/60">
+                Past Events
+              </h2>
+
+              {loading ? (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+                  {[0, 1, 2].map((i) => <CardSkeleton key={i} />)}
+                </div>
+              ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+                  {past.map((m) => <MeetupCard key={m.id} meetup={m} muted />)}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+}