{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "image-gallery",
  "type": "registry:ui",
  "title": "Image gallery",
  "description": "A responsive photo grid of square tiles, two columns on mobile and three on larger screens, each image cropped to fill. Built with React and Tailwind.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/aspect-ratio.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/image-gallery.tsx",
      "type": "registry:ui",
      "target": "components/ui/image-gallery.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { AspectRatio } from \"@/components/ui/aspect-ratio\"\n\n/** A square-tile image grid, two columns on phones and three from the small breakpoint up. */\ntype GalleryImage = { src: string; alt: string }\n\n/* Sample tiles are tiny inline SVG landscapes, so the demo needs no network and no image files. */\nconst scene = (top: string, bottom: string, near: string, far: string, sun: string, sx: number, sy: number) =>\n  `data:image/svg+xml;charset=utf-8,${encodeURIComponent(\n    `<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 400 400\"><defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"${top}\"/><stop offset=\"1\" stop-color=\"${bottom}\"/></linearGradient></defs><rect width=\"400\" height=\"400\" fill=\"url(#g)\"/><circle cx=\"${sx}\" cy=\"${sy}\" r=\"44\" fill=\"${sun}\"/><path d=\"M0 250C80 200 140 300 220 240S340 200 400 260V400H0Z\" fill=\"${far}\"/><path d=\"M0 320C100 280 180 340 260 300S360 290 400 320V400H0Z\" fill=\"${near}\"/></svg>`\n  )}`\n\nconst SAMPLE_IMAGES: GalleryImage[] = [\n  { src: scene(\"hsl(262 45% 32%)\", \"hsl(16 90% 70%)\", \"hsl(266 40% 24%)\", \"hsl(276 35% 40%)\", \"hsl(32 100% 80%)\", 300, 190), alt: \"Sunset over rolling hills\" },\n  { src: scene(\"hsl(212 50% 45%)\", \"hsl(200 55% 78%)\", \"hsl(220 40% 24%)\", \"hsl(214 35% 38%)\", \"hsl(45 100% 88%)\", 110, 120), alt: \"Mountain lake at dawn\" },\n  { src: scene(\"hsl(36 70% 62%)\", \"hsl(28 85% 72%)\", \"hsl(22 55% 36%)\", \"hsl(30 60% 50%)\", \"hsl(40 100% 92%)\", 280, 140), alt: \"Sand dunes at noon\" },\n  { src: scene(\"hsl(232 50% 12%)\", \"hsl(250 40% 28%)\", \"hsl(236 40% 10%)\", \"hsl(240 35% 18%)\", \"hsl(48 90% 88%)\", 90, 100), alt: \"Moonlit valley\" },\n  { src: scene(\"hsl(195 60% 72%)\", \"hsl(170 45% 70%)\", \"hsl(160 45% 26%)\", \"hsl(150 40% 42%)\", \"hsl(50 100% 88%)\", 330, 110), alt: \"Green meadow in spring\" },\n  { src: scene(\"hsl(205 70% 60%)\", \"hsl(185 60% 55%)\", \"hsl(205 55% 22%)\", \"hsl(195 55% 36%)\", \"hsl(40 100% 86%)\", 200, 150), alt: \"Coastline at midday\" },\n]\n\ntype ImageGalleryProps = {\n  /** Images to tile, each with alt text. Defaults to six illustrated landscapes. */\n  images?: GalleryImage[]\n  className?: string\n}\n\nfunction ImageGallery({\n  images = SAMPLE_IMAGES,\n  className,\n}: ImageGalleryProps) {\n  return (\n    <div data-slot=\"image-gallery\" className={cn(\"grid w-full max-w-2xl grid-cols-2 gap-2 sm:grid-cols-3\", className)}>\n      {images.map((img) => (\n        <AspectRatio key={img.src} ratio={1} className=\"rounded-xl border border-border bg-sunken\">\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img src={img.src} alt={img.alt} className=\"absolute inset-0 size-full object-cover\" />\n        </AspectRatio>\n      ))}\n    </div>\n  )\n}\nexport { ImageGallery }\nexport type { ImageGalleryProps, GalleryImage }\n"
    }
  ]
}