Paired Hang Compare

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge, 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/gallery5.tsx instead.

Usage

The file also exports gallery5Demo, 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 { Gallery5, gallery5Demo } from "@/components/blocks/gallery/gallery5";

export default function Page() {
  return <Gallery5 {...gallery5Demo} />;
}

Props

Types

type HungWork = {
  title: string;
  artist: string;
  year: string;
  image: { src: string; alt: string };
};

Behavior notes

• Compare mode is real client state (useState boolean): turning it on renders a second pane and a horizontal picker row of every work, letting you click any thumbnail to swap in the second pane's work via its own state index.
• Prev/next is genuinely shared: with compare mode on, clicking either arrow (or nothing, since there are no arrow-key bindings on this block) advances both the primary work index and the second-pane index together, each pane keeping its own caption in sync with its own work.
• Turning compare mode off collapses back to a single pane; the second work's picked index is preserved so re-enabling compare shows the same pairing.