Behive Tech Component Registry

Gallery

v0.1.4Draft

A responsive masonry image grid that opens a swipeable, keyboard-navigable lightbox. Tiles keep each image's ratio, captions show in the lightbox only, and the lightbox is a fullscreen `Modal`.

pnpm add @behivetech/organisms.gallery

Edit the code and the preview updates as you type. Every registry export is in scope — Gallery from this package, plus React hooks and every other component in the registry.

PlaygroundOpen in new tab
const placeholder = (hue: number, width: number, height: number) =>
  `data:image/svg+xml;utf8,${encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><rect width="100%" height="100%" fill="hsl(${hue} 80% 55%)"/></svg>`,
  )}`;

const SIZES = [
  [1200, 800],
  [800, 1200],
  [1000, 1000],
  [1200, 800],
  [800, 1000],
  [1200, 900],
  [900, 1200],
  [1200, 800],
] as const;

const IMAGES: GalleryImage[] = SIZES.map(([width, height], index) => ({
  src: placeholder(index * 45, width, height),
  alt: `Photo ${index + 1}`,
  width,
  height,
  caption: index % 2 === 0 ? `Caption for photo ${index + 1}` : undefined,
}));

const BasicGallery = () => <Gallery images={IMAGES} />;

render(<BasicGallery />);