Exhibition Wall Hang

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

Usage

The file also exports gallery13Demo, 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 { Gallery13, gallery13Demo } from "@/components/blocks/gallery/gallery13";

export default function Page() {
  return <Gallery13 {...gallery13Demo} />;
}

Props

Types

type WallWorkSize = "sm" | "md" | "lg";

interface WallWork {
  title: string;
  medium: string;
  dimensions: string;
  year: string;
  size: WallWorkSize;
  image?: { src: string; alt: string };
}

Behavior notes

• The wall panel centers every frame vertically with `items-center` against a shared horizontal guide line (a thin `bg-border` bar spanning the panel, purely decorative and `aria-hidden`), so frames of different `size` all hang on the same sightline exactly like a real salon wall, rather than each getting equal space in a grid cell.
• Real client-side state: `openIndex` (number | null) opens the viewer for the clicked work.
• The viewer supports ArrowLeft/ArrowRight and Escape via a keydown listener registered in useEffect only while a work is open, removed on close.
• The wall-label side column is a real `<dl>` of medium/dimensions/year, not decorative text, matching how a museum actually labels a hung piece.
• The dark scrim (bg-black/90), white mount border, and white/60-90 text 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 gallery13.demo.tsx file per this repo's client/demo-file-split rule, not in gallery13.tsx itself.