@bearmenu/ui 0.8.3 → 0.8.6

package/src/components/event-hub-hero.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EventHubHero, EventHubHeroSkeleton } from "./event-hub-hero";
+import { PosterStack } from "./poster-stack";
+
+function posterDataUri(label: string, fill: string) {
+  return (
+    "data:image/svg+xml;utf8," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="300" height="400"><rect width="300" height="400" fill="${fill}"/><text x="50%" y="50%" font-family="monospace" font-size="20" fill="#fff" text-anchor="middle">${label}</text></svg>`
+    )
+  );
+}
+
+// Explicitly annotated rather than `satisfies`: the meta-level decorator makes
+// the inferred type reference storybook's internal CSF module, which tsc cannot
+// name portably (TS2742).
+const meta: Meta<typeof EventHubHero> = {
+  title: "Events/EventHubHero",
+  component: EventHubHero,
+  tags: ["autodocs"],
+  args: {
+    eyebrow: "Updated today",
+    title: "Everything happening in Bucharest",
+    intro:
+      "Concerts, parties, exhibitions and everything in between — hand-curated and updated every morning.",
+    stats: [
+      { value: "312", label: "events this month" },
+      { value: "48", label: "venues" },
+      { value: "19", label: "free tonight" },
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div className="p-6">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof EventHubHero>;
+
+export const Default: Story = {};
+
+export const WithPosterStackAside: Story = {
+  args: {
+    aside: (
+      <PosterStack
+        posters={[
+          { src: posterDataUri("1", "#7a5c46"), alt: "Psihotrop poster" },
+          { src: posterDataUri("2", "#4a6a5c"), alt: "Warehouse rave poster" },
+          { src: posterDataUri("3", "#6a5c8a"), alt: "Jazz night poster" },
+        ]}
+      />
+    ),
+  },
+};
+
+export const NoAside: Story = {
+  args: { aside: undefined },
+};
+
+export const Skeleton: Story = {
+  render: () => <EventHubHeroSkeleton aside={<div className="aspect-[3/2] rounded-xl bg-muted" />} />,
+};

package/src/components/event-hub-hero.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+
+/**
+ * EventHubHero — the hub's opening block: an eyebrow, a big headline, an
+ * intro line and a stats row on the left; an arbitrary slot (the poster
+ * stack, in the source design) on the right. Stacks on mobile.
+ *
+ * All copy and stat values arrive pre-formatted — the DS holds no `Intl`
+ * locale and does not format numbers.
+ */
+
+export type EventHubHeroStat = {
+  value: string;
+  label: string;
+};
+
+export type EventHubHeroProps = {
+  /** Small caps-style label above the title, e.g. "Updated today". */
+  eyebrow: string;
+  title: string;
+  intro: string;
+  stats: EventHubHeroStat[];
+  /** The right-column slot — the poster stack in the source design. */
+  aside?: React.ReactNode;
+  className?: string;
+};
+
+export function EventHubHero({ eyebrow, title, intro, stats, aside, className }: EventHubHeroProps) {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-1 gap-8 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        className
+      )}
+    >
+      <div className="flex flex-col gap-4">
+        <p className="text-[11.5px] font-extrabold tracking-[0.12em] text-muted-foreground">
+          {eyebrow}
+        </p>
+
+        <h1 className="text-[31px] font-black leading-[1.05] tracking-[-0.035em] text-foreground md:text-[42px] md:tracking-[-0.04em]">
+          {title}
+        </h1>
+
+        <p className="max-w-[520px] text-[14px] leading-[1.6] text-muted-foreground md:text-[15px] md:leading-[1.65]">
+          {intro}
+        </p>
+
+        <div className="flex gap-[22px] pt-1.5 md:gap-[30px]">
+          {stats.map((stat) => (
+            <div key={stat.label} className="flex flex-col">
+              <span className="text-[24px] font-black leading-none tracking-[-0.03em] tabular-nums text-foreground md:text-[30px]">
+                {stat.value}
+              </span>
+              <span className="mt-1 text-[11px] text-muted-foreground md:mt-[5px] md:text-[12.5px]">
+                {stat.label}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {aside && <div className="min-w-0">{aside}</div>}
+    </div>
+  );
+}
+
+export type EventHubHeroSkeletonProps = {
+  /** The right-column slot, e.g. a `PosterStack`-shaped placeholder. Mirrors `aside` on the real component. */
+  aside?: React.ReactNode;
+  className?: string;
+};
+
+export function EventHubHeroSkeleton({ aside, className }: EventHubHeroSkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "grid grid-cols-1 gap-8 lg:grid-cols-[1fr_620px] lg:items-center lg:gap-10",
+        className
+      )}
+    >
+      <div className="flex flex-col gap-4">
+        <Skeleton className="h-[11.5px] w-28" />
+
+        <Skeleton className="h-[31px] w-full max-w-[420px] md:h-[42px]" />
+
+        <div className="flex max-w-[520px] flex-col gap-1.5">
+          <Skeleton className="h-[14px] w-full md:h-[15px]" />
+          <Skeleton className="h-[14px] w-4/5 md:h-[15px]" />
+        </div>
+
+        <div className="flex gap-[22px] pt-1.5 md:gap-[30px]">
+          {Array.from({ length: 3 }, (_, index) => (
+            <div key={index} className="flex flex-col">
+              <Skeleton className="h-[24px] w-10 md:h-[30px]" />
+              <Skeleton className="mt-1 h-[11px] w-16 md:mt-[5px] md:h-[12.5px]" />
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {aside && <div className="min-w-0">{aside}</div>}
+    </div>
+  );
+}

package/src/components/event-index-row.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Music, Wine } from "lucide-react";
+import { EventIndexRow } from "./event-index-row";
+import { EventDaySeparator } from "./event-day-separator";
+import { EventPosterFallback } from "./event-poster-fallback";
+
+const POSTER = "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=256&h=256&fit=crop";
+
+const DESCRIPTION =
+  "Trupa cântă un set de două ore din repertoriul propriu plus reinterpretări de standarde, cu pauză de treizeci de minute la mijloc. Barul rămâne deschis până la ora două, iar bucătăria ia ultima comandă la unsprezece.";
+
+const meta: Meta<typeof EventIndexRow> = {
+  title: "Events/EventIndexRow",
+  component: EventIndexRow,
+  tags: ["autodocs"],
+  args: {
+    title: "Afterwork Karaoke",
+    href: "#event",
+    when: "26 iulie, 20:00–23:00",
+    venue: "Cafe Solas",
+    venueHref: "#place",
+    fee: "intrare liberă",
+    tags: ["Karaoke", "Live music"],
+    description: DESCRIPTION,
+    posterUrl: POSTER,
+  },
+  // The row sits on a tinted band on its real surface; the decorator mirrors
+  // that so the `outline` tags and the `bg-card/60` hover are judged against
+  // the ground they actually land on, not against plain `--background`.
+  decorators: [
+    (Story) => (
+      <div className="w-full max-w-[900px] bg-muted/50 p-6">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof EventIndexRow>;
+
+export const Default: Story = {};
+
+/** The shape the section actually renders: a heading that ends in its own rule,
+ *  then rows, the first of which suppresses its rule to avoid doubling. */
+export const InAGroup: Story = {
+  render: (args) => (
+    <div>
+      <EventDaySeparator as="h2" label="Evenimente azi în Cluj-Napoca" count="3 evenimente" />
+      <EventIndexRow {...args} hideRule />
+      <EventIndexRow
+        {...args}
+        title="Degustare de vinuri naturale"
+        when="26 iulie, 19:00"
+        venue="Enoteca Veche"
+        fee="bilet 80 lei"
+        tags={["Wine tasting"]}
+        posterUrl={undefined}
+        fallback={<EventPosterFallback icon={<Wine className="h-5 w-5 md:h-7 md:w-7" aria-hidden />} />}
+      />
+      <EventIndexRow
+        {...args}
+        title="Peggy Gou b2b special guest"
+        when="26 iulie, 23:00–05:00"
+        venue="Form Space"
+        fee="bilet 140 lei"
+        tags={["Techno", "Party"]}
+        fallback={<EventPosterFallback icon={<Music className="h-5 w-5 md:h-7 md:w-7" aria-hidden />} />}
+      />
+    </div>
+  ),
+};
+
+/** No poster: the gradient fallback is already layered behind the image slot,
+ *  so this is what a missing OR a failed image renders — with no JS. */
+export const NoPoster: Story = {
+  args: { posterUrl: undefined },
+};
+
+export const TagDerivedFallback: Story = {
+  args: {
+    posterUrl: undefined,
+    fallback: <EventPosterFallback icon={<Wine className="h-5 w-5 md:h-7 md:w-7" aria-hidden />} />,
+  },
+};
+
+/** An event nobody wrote a description for. The row closes up rather than
+ *  reserving empty space, so a group of mixed rows still scans. */
+export const NoDescription: Story = {
+  args: { description: undefined },
+};
+
+/** A venue with no place page — the name stays plain text rather than becoming
+ *  a link to nowhere. */
+export const NoVenueLink: Story = {
+  args: { venueHref: undefined },
+};
+
+export const NoTags: Story = {
+  args: { tags: undefined },
+};
+
+/** Long titles WRAP. They are document-outline headings, so truncating one
+ *  would hide text from the outline the section exists to build. */
+export const LongTitle: Story = {
+  args: {
+    title:
+      "Concert aniversar: douăzeci de ani de la primul album, cu invitați speciali și orchestră de cameră",
+  },
+};
+
+/** `hideRule` on its own, for the first row directly under any heading that
+ *  already draws a rule. */
+export const FirstInGroup: Story = {
+  args: { hideRule: true },
+};

package/src/components/event-index-row.tsx

@@ -0,0 +1,181 @@
+import type { ComponentType, ReactNode } from "react";
+import { cn } from "../lib/utils";
+import { EventPosterFallback } from "./event-poster-fallback";
+import { Separator } from "./separator";
+import { Tag } from "./tag";
+import { TagGroup } from "./tag-group";
+
+/**
+ * EventIndexRow — the row of an exhaustive, crawlable event index.
+ *
+ * NOT `<EventListRowWide>`: that row belongs to the list VIEW, and it carries
+ * a price column and a Reserve chip because the list view is where you act.
+ * This row makes no claim to be operable — it is a catalogue entry. Its only
+ * affordances are two real links: the title (stretched over the whole row via
+ * `after:absolute after:inset-0`) and the venue (escaping that overlay with
+ * `relative z-10`, the same nested-link pattern `<EventListRowWide>` uses for
+ * `menuHref`). That venue link is why this could not be a variant of
+ * `<EventCompactRow>` or `<EventListRow>`: both wrap their entire body in one
+ * anchor, so a second link inside would be a nested `<a>` — invalid HTML that
+ * browsers unnest, breaking both links.
+ *
+ * NO `"use client"`, AND THAT IS LOAD-BEARING. This row's surface is a
+ * server-only prerendered page carrying ~50 of them, and every sibling row in
+ * this family is a client component for one reason: `useState` to catch
+ * `<img onError>`. Here the fallback is layered BEHIND the poster instead, so
+ * a failed image reveals the designed gradient with no JS at all. The
+ * consequence to accept: an image that returns 200 but decodes to garbage
+ * shows an empty box rather than the fallback.
+ *
+ * THE DESCRIPTION IS NEVER TRUNCATED IN THE MARKUP — it is clamped with CSS
+ * (`line-clamp`), so the full text stays in the DOM. Callers must pass the
+ * whole string. On this surface that is the entire point: the text is the
+ * page's body copy, and a row that cut it at N characters would be deleting
+ * the thing the section exists to carry.
+ *
+ * ROW RULES: this row draws its own top rule, same as `<EventListRow>` and
+ * `<EventListRowWide>`. Pass `hideRule` on the first row under a heading that
+ * already ends in one (`<EventDaySeparator>` does), or you get two rules a few
+ * pixels apart.
+ */
+
+export type EventIndexRowLinkProps = {
+  href: string;
+  className?: string;
+  children: ReactNode;
+};
+
+function DefaultLink({ href, ...props }: EventIndexRowLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type EventIndexRowProps = {
+  /** Rendered inside `as` and allowed to WRAP — a document-outline heading is never truncated. */
+  title: string;
+  /** Heading level for `title`. Defaults to `h3`, one below the group headings. */
+  as?: "h2" | "h3" | "h4";
+  href: string;
+  /** Leading emphasised fact on the meta line — caller-composed date + time, e.g. "26 iulie, 20:00–23:00". */
+  when: string;
+  venue?: string;
+  /** Makes the venue a real second link. Omit for a venue with no place page. */
+  venueHref?: string;
+  /** Plain text, never a chip: "intrare liberă" / "bilet 40 lei". */
+  fee?: string;
+  /** Display labels. `EventPreview.tags` is taxonomy coordinates the DS cannot translate, so the caller resolves and caps them. */
+  tags?: string[];
+  /** FULL text. Clamped to 3 lines (mobile) / 2 (md+) in CSS only. */
+  description?: string;
+  posterUrl?: string;
+  fallback?: ReactNode;
+  /** Suppresses the top rule. Use on the first row under a heading that draws its own. */
+  hideRule?: boolean;
+  linkComponent?: ComponentType<EventIndexRowLinkProps>;
+  className?: string;
+};
+
+export function EventIndexRow({
+  title,
+  as: Heading = "h3",
+  href,
+  when,
+  venue,
+  venueHref,
+  fee,
+  tags,
+  description,
+  posterUrl,
+  fallback = <EventPosterFallback />,
+  hideRule,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: EventIndexRowProps) {
+  const dot = (
+    <span className="px-1 text-border" aria-hidden>
+      ·
+    </span>
+  );
+
+  return (
+    <div className={cn("relative", className)}>
+      {!hideRule && <Separator className="absolute inset-x-0 top-0" />}
+
+      <div className="relative -mx-3 flex gap-3 rounded-lg px-3 py-4 transition-colors duration-150 hover:bg-card/60 motion-reduce:transition-none md:gap-4 md:py-5">
+        {/* Square poster at the same 72/104 the rest of the row family uses —
+            the editorial surfaces above this one are 4:3, but a third ratio
+            inside the ROW family would break the sibling-shape rule for one
+            section's sake. The fallback sits behind the image rather than
+            beside it in a ternary, which is what lets this whole row stay a
+            server component. */}
+        <div className="relative aspect-square w-[72px] shrink-0 overflow-hidden rounded-[9px] bg-muted md:w-[104px]">
+          <div className="absolute inset-0">{fallback}</div>
+          {posterUrl && (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={posterUrl}
+              alt=""
+              loading="lazy"
+              decoding="async"
+              className="absolute inset-0 h-full w-full object-cover"
+            />
+          )}
+        </div>
+
+        <div className="min-w-0 flex-1">
+          <Heading className="text-[15px] font-bold leading-snug tracking-[-0.01em] text-foreground md:text-[16.5px]">
+            <LinkComponent
+              href={href}
+              className="rounded-sm transition-colors duration-150 after:absolute after:inset-0 hover:text-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+            >
+              {title}
+            </LinkComponent>
+          </Heading>
+
+          <p className="mt-1 text-[12px] leading-5 text-muted-foreground md:text-[12.5px]">
+            <span className="font-semibold tabular-nums text-foreground">{when}</span>
+            {venue && (
+              <>
+                {dot}
+                {venueHref ? (
+                  <LinkComponent
+                    href={venueHref}
+                    className="relative z-10 rounded-sm font-semibold text-foreground/85 underline decoration-border underline-offset-2 transition-colors duration-150 hover:text-primary hover:decoration-primary motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                  >
+                    {venue}
+                  </LinkComponent>
+                ) : (
+                  <span className="font-semibold text-foreground/85">{venue}</span>
+                )}
+              </>
+            )}
+            {fee && (
+              <>
+                {dot}
+                {fee}
+              </>
+            )}
+          </p>
+
+          {tags && tags.length > 0 && (
+            // `outline`, not the default: default `Tag` is `bg-muted`, and this
+            // row's surface is a `bg-muted/50` band — a 0.019-L delta in light
+            // mode, which is invisible. `outline` reads on both.
+            <TagGroup className="mt-2">
+              {tags.map((tag) => (
+                <Tag key={tag} size="sm" variant="outline">
+                  {tag}
+                </Tag>
+              ))}
+            </TagGroup>
+          )}
+
+          {description && (
+            <p className="mt-2 line-clamp-3 max-w-[620px] text-[13px] leading-[1.6] text-muted-foreground md:line-clamp-2 md:text-[13.5px] md:leading-[1.55]">
+              {description}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/event-list-row-wide.stories.tsx

@@ -0,0 +1,204 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EventListRowWide, EventListRowWideSkeleton } from "./event-list-row-wide";
+import type { EventListRowWideLabels } from "./event-list-row-wide";
+import type { EventDateBadgeFormatters, EventPreview } from "./event-types";
+
+const labels: EventListRowWideLabels = {
+  free: "Free",
+  liveNow: "On now",
+  reserve: "Reserve",
+  notifyMe: "Notify me",
+  soldOut: "Sold out",
+  seeMenu: "See the menu",
+};
+
+const formatters: EventDateBadgeFormatters = {
+  time: (iso) => new Date(iso).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" }),
+  day: (iso) =>
+    new Date(iso).toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "short" }),
+  price: (amount) => `${amount} RON`,
+  dayNumber: (iso) => String(new Date(iso).getDate()).padStart(2, "0"),
+  monthShort: (iso) =>
+    new Date(iso).toLocaleDateString("en-GB", { month: "short" }).toUpperCase(),
+};
+
+const event = (
+  id: string,
+  title: string,
+  place: string,
+  startsAt: string,
+  fee?: number,
+  description?: string
+): EventPreview => ({
+  id,
+  title,
+  location: place,
+  place_name: place,
+  starts_at: startsAt,
+  entry_fee: fee,
+  description,
+});
+
+const description =
+  "Rooftop set from sunset to close, resident DJs on the decks all night, kitchen open until midnight with the full grill menu.";
+
+const meta: Meta<typeof EventListRowWide> = {
+  title: "Events/EventListRowWide",
+  component: EventListRowWide,
+  tags: ["autodocs"],
+  args: { labels, formatters },
+  decorators: [
+    (Story) => (
+      <div className="w-[860px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The desktop list row — denser than the poster card, richer than the mobile list row, with a description and a dedicated action column. The row root is a plain container: the title is the primary link with a stretched overlay (so the whole row stays one click target), and 'See the menu' — rendered only when `menuHref` is set — is a second, real link layered above the overlay so it wins clicks in its own area.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EventListRowWide>;
+
+export const Default: Story = {
+  args: {
+    event: event("1", "Psihotrop Live", "Atelier Café", "2026-09-05T20:00:00", 50, description),
+    tags: ["Live music", "Rooftop"],
+  },
+};
+
+/**
+ * The nested-link pattern: the title is the primary link (stretched over the
+ * whole row via `after:absolute after:inset-0`), and "See the menu" is a real,
+ * independently targeted link that wins clicks in its own area.
+ */
+export const WithMenuLink: Story = {
+  args: {
+    event: event("1b", "Psihotrop Live", "Atelier Café", "2026-09-05T20:00:00", 50, description),
+    tags: ["Live music", "Rooftop"],
+    href: "/events/psihotrop-live",
+    menuHref: "/places/atelier-cafe/menu",
+    onClick: (_event, mouseEvent) => mouseEvent.preventDefault(),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Click the title anywhere in the row to open the event; click 'See the menu' to go to the venue's menu instead — both are real links, not one anchor with dead text nested inside it.",
+      },
+    },
+  },
+};
+
+/** No `menuHref` — the affordance is omitted entirely rather than rendered as dead text. */
+export const WithoutMenuLink: Story = {
+  args: {
+    event: event("1c", "Psihotrop Live", "Atelier Café", "2026-09-05T20:00:00", 50, description),
+    tags: ["Live music", "Rooftop"],
+    href: "/events/psihotrop-live",
+    onClick: (_event, mouseEvent) => mouseEvent.preventDefault(),
+  },
+};
+
+export const FreeEntry: Story = {
+  args: {
+    event: event("2", "Vinyl Happy Hour", "Zorki Photo Cafe", "2026-09-04T18:00:00", 0, description),
+    tags: ["Vinyl", "Happy hour"],
+  },
+};
+
+/** No published fee is "TBC", never "Free". */
+export const UnknownPrice: Story = {
+  args: { event: event("3", "Quiz Night", "Flying Circus", "2026-09-03T19:00:00") },
+};
+
+/** Live tints the date badge and adds the on-air chip. */
+export const LiveNow: Story = {
+  args: {
+    event: event("4", "Charity Concert & Afterparty", "Flying Circus", "2026-09-03T21:00:00", 30, description),
+    isLive: true,
+    tags: ["Charity", "Concert"],
+  },
+};
+
+/** Sold out dims the row and swaps the CTA to "Notify me". */
+export const SoldOut: Story = {
+  args: {
+    event: event("5", "Friday Night Techno", "Form Space", "2026-09-04T22:00:00", 50, description),
+    isSoldOut: true,
+    tags: ["Techno", "Club night"],
+  },
+};
+
+/** No `description` on the event — the block collapses instead of leaving a gap. */
+export const NoDescription: Story = {
+  args: {
+    event: event("6", "Stand-up Comedy Night", "Klausen Pubhouse", "2026-09-04T19:30:00", 45),
+    tags: ["Comedy"],
+  },
+};
+
+/** Loading state — identical geometry to `Default`, so nothing shifts on data arrival. */
+export const Loading: Story = {
+  render: () => <EventListRowWideSkeleton />,
+};
+
+/** `NoDescription`'s narrower geometry, loading. */
+export const LoadingNoDescription: Story = {
+  render: () => <EventListRowWideSkeleton showDescription={false} />,
+};
+
+/** A loading row above a loaded one, so any geometry drift is visible at a glance. */
+export const LoadingVsLoaded: Story = {
+  render: () => (
+    <div>
+      <EventListRowWideSkeleton />
+      <EventListRowWide
+        event={event("1", "Psihotrop Live", "Atelier Café", "2026-09-05T20:00:00", 50, description)}
+        labels={labels}
+        formatters={formatters}
+        tags={["Live music", "Rooftop"]}
+      />
+    </div>
+  ),
+};
+
+/** A day's worth of rows, as the desktop list view stacks them. */
+export const ADay: Story = {
+  render: () => (
+    <div>
+      <EventListRowWide
+        event={event("a", "Psihotrop Live", "Atelier Café", "2026-09-03T20:00:00", 50, description)}
+        labels={labels}
+        formatters={formatters}
+        tags={["Live music", "Rooftop"]}
+        isLive
+      />
+      <EventListRowWide
+        event={event("b", "Quiz Night", "Flying Circus", "2026-09-03T20:00:00")}
+        labels={labels}
+        formatters={formatters}
+      />
+      <EventListRowWide
+        event={event("c", "Beer Battle", "Irish Music Pub", "2026-09-03T20:00:00", 0, description)}
+        labels={labels}
+        formatters={formatters}
+        tags={["Nightlife"]}
+      />
+      <EventListRowWide
+        event={event("e", "Schoolotheque Afterparty", "Flying Circus", "2026-09-03T22:00:00", 25, description)}
+        labels={labels}
+        formatters={formatters}
+        tags={["Afterparty"]}
+        isSoldOut
+      />
+    </div>
+  ),
+};