Screenshot Gallery with Lightbox

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

Usage

The file also exports feature122Demo, 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 { Feature122, feature122Demo } from "@/components/blocks/feature/feature122";

export default function Page() {
  return <Feature122 {...feature122Demo} />;
}

Props

Types

interface Feature122Screenshot {
  image: { src: string; alt: string };
  caption?: string;
}

Behavior notes

• Real client-side state: `openIndex` (number | null) tracks which screenshot the lightbox is showing via useState, starting at null so the lightbox is closed on mount.
• The lightbox supports Previous/Next buttons, ArrowLeft/ArrowRight keys, and Escape to close, wired through a keydown listener registered in useEffect only while the lightbox is open (removed on close/unmount).
• The close button and prev/next controls are real `<button>` elements with `aria-label`s, not icon-only elements without an accessible name; the grid's zoom icon overlay is `aria-hidden` since each thumbnail button already has its own descriptive `aria-label`.
• The hover zoom icon (`ZoomIn`) is a CSS opacity/scale transition on hover, purely decorative until the thumbnail is actually clicked, which is what opens the real lightbox state.
• No focus trap is implemented inside the open lightbox (per this repo's accessibility bar for this block: a real close control and Escape-to-close are required, a full trap is not), so Tab can still reach the underlying page while the lightbox is open.
• "use client" component, so its demo props live in the sibling feature122.demo.tsx file per this repo's client/demo-file-split rule, not in feature122.tsx itself.