"use client"; import * as React from "react"; import { Dialog as DialogPrimitive } from "radix-ui"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { ChevronLeftIcon, ChevronRightIcon, XIcon } from "@kineticui/icons"; export type LightboxImage = { src: string; alt: string; caption?: string }; export type LightboxProps = { images: LightboxImage[]; /** Thumbnail grid columns. */ columns?: number; className?: string; }; /** Image grid that opens a full-screen viewer with keyboard, swipe and thumbnails. */ export function Lightbox({ images, columns = 3, className }: LightboxProps) { const [index, setIndex] = React.useState(null); const [dir, setDir] = React.useState(1); const open = index !== null; const go = React.useCallback( (d: number) => { setDir(d); setIndex((i) => (i === null ? i : (i + d + images.length) % images.length)); }, [images.length], ); React.useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => { if (e.key === "ArrowRight") go(1); if (e.key === "ArrowLeft") go(-1); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, go]); const current = index !== null ? images[index] : null; return ( <>

{images.map((img, i) => ( ))}

!o && setIndex(null)}> {current?.alt ?? "Image"}

{index !== null ? `${index + 1} / ${images.length}` : null}

{current ? ( { if (info.offset.x < -80) go(1); else if (info.offset.x > 80) go(-1); }} className="max-h-[75vh] max-w-full cursor-grab rounded-xl object-contain active:cursor-grabbing" /> ) : null}

{current?.caption ?

{current.caption}

: null}

{images.map((img, i) => ( ))}

); }

Lightbox

Installation

Exports