4a:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4b:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4c:T14ac,"use client" import * as React from "react" import { Grid2X2, Images, Rows3 } from "lucide-react" import { cn } from "@/lib/utils" import { ImageGrid, type GalleryImage, type ImageGridLayout, } from "@/registry/default/image-grid/image-grid" import { Lightbox } from "@/registry/default/lightbox/lightbox" export type ImageGalleryItem = GalleryImage export type ImageGalleryLayout = ImageGridLayout export interface ImageGalleryProps extends Omit< React.ComponentPropsWithoutRef<"section">, "title" > { images: ImageGalleryItem[] title?: React.ReactNode layout?: ImageGalleryLayout defaultLayout?: ImageGalleryLayout onLayoutChange?: (layout: ImageGalleryLayout) => void selectedId?: string | null defaultSelectedId?: string | null onSelectedIdChange?: (id: string | null) => void showLayoutToggle?: boolean emptyState?: React.ReactNode renderImage?: ( image: ImageGalleryItem, context: { lightbox: boolean } ) => React.ReactNode } /* * A block: the grid, the lightbox, and the chrome that holds them. Image Grid * needs nothing but React, and Lightbox works over any set of images, so reach * for those directly when you do not want this arrangement. */ export const ImageGallery = React.forwardRef( function ImageGallery( { images, title = "Gallery", layout: controlledLayout, defaultLayout = "grid", onLayoutChange, selectedId: controlledSelectedId, defaultSelectedId = null, onSelectedIdChange, showLayoutToggle = true, emptyState = "No images yet.", renderImage, className, ...sectionProps }, forwardedRef ) { const [uncontrolledLayout, setUncontrolledLayout] = React.useState(defaultLayout) const [uncontrolledSelectedId, setUncontrolledSelectedId] = React.useState< string | null >(defaultSelectedId) const lastTriggerRef = React.useRef(null) const layout = controlledLayout ?? uncontrolledLayout const selectedId = controlledSelectedId ?? uncontrolledSelectedId function changeLayout(nextLayout: ImageGalleryLayout) { if (controlledLayout === undefined) setUncontrolledLayout(nextLayout) onLayoutChange?.(nextLayout) } function changeSelectedId(nextId: string | null) { if (controlledSelectedId === undefined) setUncontrolledSelectedId(nextId) onSelectedIdChange?.(nextId) } return ( <>

{title}

{images.length} {images.length === 1 ? " image" : " images"}

{showLayoutToggle && images.length > 0 && ( )}

{emptyState} } images={images} layout={layout} renderImage={ renderImage ? (image) => renderImage(image, { lightbox: false }) : undefined } onSelect={(image, event) => { lastTriggerRef.current = event.currentTarget changeSelectedId(image.id) }} />

renderImage(image, { lightbox: true }) : undefined } onOpenIdChange={changeSelectedId} /> ) } ) 49:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react@^1.31.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.31.0"}]]}]}]]}],["$","$L4a",null,{"namespace":"@mischief","registryDependencies":["utils","https://ui.tinkererslabs.com/r/image-grid.json","https://ui.tinkererslabs.com/r/lightbox.json"]}]]}],null]}],["$","$L4b",null,{"files":[{"path":"registry/default/image-gallery/image-gallery.tsx","content":"$4c","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]