Salon Hang Wall

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

Usage

The file also exports gallery10Demo, 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 { Gallery10, gallery10Demo } from "@/components/blocks/gallery/gallery10";

export default function Page() {
  return <Gallery10 {...gallery10Demo} />;
}

Props

Types

type Gallery10Span = 1 | 2 | 3 | 4;

interface Gallery10Work {
  alt: string;
  span: Gallery10Span;
  image?: { src: string; alt: string };
}

Behavior notes

• Real client-side state: `openIndex` (number | null) tracks which work the viewer is showing via useState, starting at null so the viewer is closed on mount.
• The viewer's left and right quarter-width regions are real `<button>` elements covering the full height of the screen (`inset-y-0 w-1/4`) that call the same previous/next handlers as ArrowLeft/ArrowRight; each shows a chevron only on hover so the click zone stays visually quiet, matching a passe-partout mat rather than a toolbar.
• Escape closes the viewer and Left/Right arrow keys navigate, wired through a keydown listener registered in useEffect only while a work is open, removed on close/unmount.
• The grid panel and works themselves show no titles or captions (a genuinely label-free salon wall); every thumbnail and viewer control still carries a real `aria-label` for accessibility even though nothing is printed on screen.
• "use client" component, so its demo props live in the sibling gallery10.demo.tsx file per this repo's client/demo-file-split rule, not in gallery10.tsx itself.