Recorded Sessions Archive

Event97: Recorded Sessions Archive

A past events archive leading with an image tile that floats a recording card, then listing every earlier session as linked hairline rows with its date, place and running time.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/event97?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/event97?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/event97.tsx, the media25 video-card piece it floats on the tile (installed to components/beste/piece/media25.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

The installed file exports event97Demo alongside the block: the exact props behind the preview above. Spread it to get a working archive in one line.

import { Event97, event97Demo } from "@/components/beste/block/event97";

export default function ArchivePage() {
  return <Event97 {...event97Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Event97 } from "@/components/beste/block/event97";
import { Media25 } from "@/components/beste/piece/media25";

export default function ArchivePage() {
  return (
    <Event97
      badge={{ label: "Watch it back" }}
      heading="Every session we have run, recorded and left up"
      description="No registration wall and no expiry."
      featuredTitle="Most watched"
      featuredBody="A finance lead walks through month-end on real anonymised data."
      media={
        <Media25
          thumbnail={{ src: "/events/month-end.jpg", alt: "A desk with paperwork" }}
          title="Month-end in an afternoon"
          meta="Practice Day 2025"
          duration="41:12"
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      button={{ label: "Watch the recording", href: "/watch/month-end" }}
      events={[
        {
          date: "March 2026",
          title: "Multi-site roundtable",
          description: "Twelve managers running four or more clinics, chaired by a practice.",
          place: "Bristol",
          length: "1:48",
          href: "/watch/roundtable",
        },
      ]}
      note="Recordings are published within a week and we do not gate them."
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

type PastEvent = {
  date: string;
  title: string;
  description: string;
  place: string;
  length: string;
  href: string;
};

Behavior notes

• The media25 piece shows a cover image and a duration chip, with no play control. That is deliberate: the tile is a preview, and the action beneath it is the thing that actually plays, so nothing on the image invites a click that does nothing.
• The featured pitch is a large paragraph rather than a heading, since the recording's own title lives inside the piece and two competing titles would fight.
• Rows are whole Link elements in a four-track grid from md: date, session, length, then the arrow. Below md the arrow is hidden entirely, since the row is already obviously tappable.
• The hover arrow uses a named group, group/event97, rather than the bare group class, so nesting this block inside another grouped component will not trigger both animations. The shift is wrapped in motion-safe:.
• length is free text, so it can carry a running time like "41:12" or a count like "6 sessions". It uses tabular-nums either way.
• Rows carry md:px-4 alongside the hover fill, so the highlight extends slightly past the text on wider screens.
• The featured row is lg:items-center, so the tile stays centered against a copy column whose height varies with the pitch length.