Event Card

1// Grid tile for one event. Styled with base44 design tokens (shadcn Tailwind classes) — re-skin via
2// those tokens (src/index.css :root/.dark), not this JSX. The date/location/teaser field paths and
3// the TICKETING "from" price are load-bearing: lowestPrice is a Money object { value, currency,
4// formattedValue } — render formattedValue, NEVER the raw object (React "objects are not valid as a
5// child" crash). This is a different shape from the ticket-definition price (pricing.fixedPrice.amount)
6// used in the picker.
7import { Link } from "react-router-dom";
8
9export default function EventCard({ event }) {
10  const when = event.dateAndTimeSettings?.formatted?.dateAndTime;
11  const where = event.location?.name;
12  const isTicketing = event.registration?.type === "TICKETING";
13  const fromPrice = event.registration?.tickets?.lowestPrice?.formattedValue;
14  const soldOut = event.registration?.tickets?.soldOut;
15  const image = event.mainImage?.url;
16
17  return (
18    <Link to={`/events/${event.slug}`}
19      className="flex flex-col no-underline text-foreground bg-card border border-border rounded-lg overflow-hidden shadow-sm">
20      <div className="relative aspect-[3/2] bg-background">
21        {image
22          ? <img src={image} alt={event.title} loading="lazy" className="w-full h-full object-cover" />
23          : <div className="w-full h-full bg-muted flex items-center justify-center" aria-hidden="true"><svg viewBox="0 0 24 24" className="w-8 h-8 text-muted-foreground/40" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx=
24        {isTicketing && soldOut && (
25          <span className="absolute top-2 left-2 py-0.5 px-2 text-xs bg-destructive text-white rounded-sm">Sold out</span>
26        )}
27      </div>
28      <div className="p-3 flex flex-col gap-1">
29        <h3 className="m-0 font-display text-base font-semibold">{event.title}</h3>
30        {when && <span className="text-muted-foreground text-[13px]">{when}</span>}
31        {where && <span className="text-muted-foreground text-[13px]">{where}</span>}
32        {event.shortDescription && (
33          <p className="m-0 mt-1 text-muted-foreground text-sm leading-[1.4]">
34            {event.shortDescription}
35          </p>
36        )}
37        {isTicketing && !soldOut && fromPrice && (
38          <span className="mt-1 font-semibold text-primary">From {fromPrice}</span>
39        )}
40      </div>
41    </Link>
42  );
43}