Acquisition Year Ledger

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/gallery17.tsx instead.

Usage

The file also exports gallery17Demo, 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 { Gallery17, gallery17Demo } from "@/components/blocks/gallery/gallery17";

export default function Page() {
  return <Gallery17 {...gallery17Demo} />;
}

Props

Types

interface LedgerWork {
  title: string;
  medium?: string;
  image?: { src: string; alt: string };
}

interface AcquisitionYear {
  year: string;
  summary: string;
  works: LedgerWork[];
}

Behavior notes

• The page list is a flat read: every year's `works` are flattened once per render (not stored in state) into a single ordered list, and each work's flattened index is what a click opens the viewer to.
• The viewer's scroll container uses `snap-y snap-mandatory`, and every acquisition renders as its own `h-full snap-start` section - scrolling (mouse wheel, touch, or a scrollbar drag) is the primary way to move between works, there is no prev/next button.
• A real `IntersectionObserver` (rooted at the scroll container, threshold 0.6) is set up in a `useEffect` that only runs while the viewer is open, observing every section and updating `activeIndex` to whichever one is currently intersecting past the threshold - the header counter reads directly from this state, not from scroll-position math.
• Opening the viewer at a specific work is a real DOM side effect, not derived state: a separate `useEffect` calls `scrollIntoView({ behavior: "auto", block: "start" })` on the clicked work's section ref once the viewer mounts, so it opens already scrolled to the right acquisition instead of always starting at the first one.
• Escape closes the viewer via a keydown listener registered in useEffect only while it's open, removed on close.
• The dark ground (bg-black/90) and white text/icon chrome in the 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 gallery17.demo.tsx file per this repo's client/demo-file-split rule, not in gallery17.tsx itself.