Catalogue Index Plates

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its media-slot dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/gallery/gallery12.tsx instead.

Usage

The file also exports gallery12Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Gallery12, gallery12Demo } from "@/components/blocks/gallery/gallery12";

export default function Page() {
  return <Gallery12 {...gallery12Demo} />;
}

Props

Types

interface CatalogueEntry {
  number: string;
  title: string;
  artist?: string;
  note: string;
  image?: { src: string; alt: string };
}

Behavior notes

• Real client-side state: `activeIndex` (number) drives both the highlighted index row and which plate the sticky panel shows; clicking any row sets it directly.
• The seal button in the plate's corner sets `isExpanded` (boolean) to open the same active plate full-screen; it doesn't duplicate `activeIndex` into a second piece of state.
• The full-screen viewer intentionally shows only the plate number and the image, no title/artist/note, matching the brief's 'plate alone' framing; the number and note stay visible in the page's own sticky panel underneath.
• The viewer's arrow buttons and a keydown listener (registered in useEffect only while `isExpanded` is true, removed on close) both drive the same `activeIndex`, so navigating in the viewer also updates the index list and plate panel underneath once closed.
• Escape closes the viewer via the same keydown listener.
• The dark ground (bg-black/90) and white number/button chrome in the full-screen viewer are the deliberate dark-viewer-surface exception to the semantic-tokens rule used across this gallery category's other full-screen viewers.
• "use client" component, so its demo props live in the sibling gallery12.demo.tsx file per this repo's client/demo-file-split rule, not in gallery12.tsx itself.