{"$schema":"https://ui.shadcn.com/schema/registry-item.json","type":"registry:block","registryDependencies":["aspect-ratio","@efferd/lazy-image"],"name":"image-gallery-1","description":"Masonry-style responsive gallery using random images with dynamic aspect ratios.","dependencies":["motion"],"categories":["image-gallery"],"files":[{"path":"registry/blocks/image-gallery/1/index.tsx","type":"registry:component","target":"~/components/image-gallery.tsx","content":"import { LazyImage } from \"@/components/lazy-image\";\n\nexport function ImageGallery() {\n\treturn (\n\t\t<div className=\"relative flex min-h-screen w-full flex-col items-center justify-center px-4 py-10\">\n\t\t\t<div className=\"mx-auto grid w-full max-w-5xl grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4 md:gap-6\">\n\t\t\t\t{Array.from({ length: 4 }).map((_, col) => (\n\t\t\t\t\t<div className=\"grid gap-4\" key={col}>\n\t\t\t\t\t\t{Array.from({ length: 8 }).map((_, index) => {\n\t\t\t\t\t\t\tconst isPortrait = Math.random() > 0.5;\n\t\t\t\t\t\t\tconst width = isPortrait ? 1080 : 1920;\n\t\t\t\t\t\t\tconst height = isPortrait ? 1920 : 1080;\n\t\t\t\t\t\t\tconst ratio = isPortrait ? 9 / 16 : 16 / 9;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<LazyImage\n\t\t\t\t\t\t\t\t\talt={`Image ${col}-${index}`}\n\t\t\t\t\t\t\t\t\tcontainerClassName=\"cn-rounded\"\n\t\t\t\t\t\t\t\t\tfallback={`https://placehold.co/${width}x${height}/`}\n\t\t\t\t\t\t\t\t\tinView={true}\n\t\t\t\t\t\t\t\t\tkey={`${col}-${index}`}\n\t\t\t\t\t\t\t\t\tratio={ratio}\n\t\t\t\t\t\t\t\t\tsrc={`https://picsum.photos/seed/${col}-${index}/${width}/${height}`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"}]}