{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "media-gallery",
  "type": "registry:block",
  "title": "Media Gallery",
  "description": "A gallery for displaying multiple images or videos with masonry layout support.",
  "dependencies": [
    "react-photo-album"
  ],
  "registryDependencies": [
    "media-item"
  ],
  "files": [
    {
      "path": "src/components/deso/media-gallery.tsx",
      "content": "import * as React from 'react';\nimport { MasonryPhotoAlbum } from 'react-photo-album';\nimport { MediaItem, MediaType } from './media-item';\nimport { cn } from '@/lib/utils/deso';\nimport 'react-photo-album/masonry.css';\n\ninterface MediaItem {\n  id: string;\n  imageUrl: string;\n  mediaType: MediaType;\n  viewCount: number;\n}\n\ninterface MediaGalleryProps {\n  mediaItems: MediaItem[];\n  onMediaClick?: (id: string) => void;\n  className?: string;\n  variant?: 'grid' | 'masonry';\n  columns?: number;\n  columnGap?: number;\n  mediaItemClassName?: string;\n}\n\n// Convert MediaItem to react-photo-album Photo format\nconst convertToPhotos = (mediaItems: MediaItem[]) => {\n  return mediaItems.map((item) => ({\n    src: item.imageUrl,\n    width: 300, // Base width for calculations\n    height: getHeightFromUrl(item.imageUrl), // Extract height from URL\n    key: item.id,\n    mediaType: item.mediaType,\n    viewCount: item.viewCount,\n  }));\n};\n\nconst columnClasses: Record<number, string> = {\n  2: 'grid-cols-2',\n  3: 'grid-cols-3',\n  4: 'grid-cols-4',\n  5: 'grid-cols-5',\n  6: 'grid-cols-6',\n};\n\n// Extract height from Picsum URL format\nconst getHeightFromUrl = (url: string): number => {\n  const match = url.match(/\\/(\\d+)\\/(\\d+)$/);\n  if (match) {\n    return parseInt(match[2], 10);\n  }\n  return 300; // fallback height\n};\n\nexport const MediaGallery = ({\n  mediaItems,\n  onMediaClick,\n  className,\n  mediaItemClassName,\n  variant = 'grid',\n  columns = 6,\n  columnGap = 4,\n}: MediaGalleryProps) => {\n  if (variant === 'masonry') {\n    const photos = convertToPhotos(mediaItems);\n    \n    return (\n      <div className={className}>\n        <MasonryPhotoAlbum\n          photos={photos}\n          spacing={8}\n          columns={(containerWidth) => {\n            if (containerWidth < 640) return 2;\n            if (containerWidth < 768) return 3;\n            if (containerWidth < 1024) return 4;\n            if (containerWidth < 1280) return 5;\n            return 6;\n          }}\n          render={{\n            photo: ({ onClick }, { photo, width, height }) => {\n              const mediaItem = mediaItems.find(item => item.id === photo.key);\n              if (!mediaItem) return null;\n              \n              return (\n                <div style={{ width, height, position: 'relative' }}>\n                  <MediaItem\n                    imageUrl={mediaItem.imageUrl}\n                    mediaType={mediaItem.mediaType}\n                    viewCount={mediaItem.viewCount}\n                    className={mediaItemClassName}\n                    onClick={() => onMediaClick?.(mediaItem.id)}\n                  />\n                </div>\n              );\n            },\n          }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      style={{ gap: `${columnGap}px` }}\n      className={cn(\n        `grid ${columnClasses[columns as keyof typeof columnClasses]} `,\n        className\n      )}\n    >\n      {mediaItems.map((item) => (\n        <MediaItem\n          key={item.id}\n          imageUrl={item.imageUrl}\n          mediaType={item.mediaType}\n          viewCount={item.viewCount}\n          onClick={() => onMediaClick?.(item.id)}\n          className={cn(\"aspect-square\", mediaItemClassName)}\n        />\n      ))}\n    </div>\n  );\n}; ",
      "type": "registry:component",
      "target": "src/components/deso-ui/media-gallery.tsx"
    }
  ]
}