Event Detail

1// Event detail page — thin view over useEventDetail (all logic lives in the hook). Renders the
2// event summary + the registration surface. Styled with base44 design tokens (shadcn Tailwind classes).
3//
4// shortDescription is a PLAIN string (safe to render). event.description is Ricos rich content
5// { nodes: [...] } — NOT a string; to show the full body render it with @wix/ricos or walk `nodes`.
6// NEVER call string methods (.slice/.substring/.split) on event.description — that crashes the page.
7import { useParams } from "react-router-dom";
8import { useEventDetail } from "@/hooks/useEventDetail";
9import EventRegistration from "@/components/EventRegistration";
10
11export default function EventDetail() {
12  const { slug } = useParams();
13  const d = useEventDetail(slug);
14
15  if (d.notFound) return <Centered>Event not found.</Centered>;
16  if (!d.event) return <Centered>Loading…</Centered>;
17
18  const { event } = d;
19  const when = event.dateAndTimeSettings?.formatted?.dateAndTime;
20  const where = event.location?.name;
21
22  return (
23    <main className="max-w-[1200px] mx-auto p-4 grid gap-8 [grid-template-columns:repeat(auto-fit,minmax(320px,1fr))]">
24      <div className="aspect-[3/2] bg-card rounded-lg overflow-hidden">
25        {event.mainImage?.url &&
26          <img src={event.mainImage.url} alt={event.title} className="w-full h-full object-cover" />}
27      </div>
28
29      <div>
30        <h1 className="font-display m-0 mb-2">{event.title}</h1>
31        {when && <p className="m-0 mb-1 text-muted-foreground">{when}</p>}
32        {where && <p className="m-0 mb-4 text-muted-foreground">{where}</p>}
33
34        {event.shortDescription && (
35          <p className="text-foreground leading-relaxed mb-6">
36            {event.shortDescription}
37          </p>
38        )}
39
40        <EventRegistration event={event} type={d.type} open={d.open} registration={d.registration} />
41      </div>
42    </main>
43  );
44}
45
46function Centered({ children }) {
47  return <div className="p-12 text-center text-muted-foreground">{children}</div>;
48}