react-advanced-gallery/dist/components/GalleryGrid.js

A customizable React image gallery component with Bootstrap styling, fullscreen mode, animations, and support for various media types

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { GalleryItem as GalleryItemComponent } from './GalleryItem';
export function GalleryGrid({ items, layout, animation, onImageClick, onFavoriteToggle, onImageRemove }) {
    // Standard grid layout
    if (layout === 'grid') {
        return (_jsx("div", { className: "rag-grid rag-mb-4", children: items.map((item) => (_jsx(GalleryItemComponent, { item: item, onImageClick: onImageClick, onFavoriteToggle: onFavoriteToggle, onImageRemove: onImageRemove, animationType: animation }, item.id))) }));
    }
    // Masonry layout
    if (layout === 'masonry') {
        return (_jsxs("div", { className: "rag-masonry rag-mb-4", children: [_jsx("div", { className: "rag-d-flex rag-flex-column rag-gap-3", children: items.filter((_, i) => i % 3 === 0).map((item) => (_jsx(GalleryItemComponent, { item: item, onImageClick: onImageClick, onFavoriteToggle: onFavoriteToggle, onImageRemove: onImageRemove, animationType: animation }, item.id))) }), _jsx("div", { className: "rag-d-flex rag-flex-column rag-gap-3", children: items.filter((_, i) => i % 3 === 1).map((item) => (_jsx(GalleryItemComponent, { item: item, onImageClick: onImageClick, onFavoriteToggle: onFavoriteToggle, onImageRemove: onImageRemove, animationType: animation }, item.id))) }), _jsx("div", { className: "rag-d-flex rag-flex-column rag-gap-3", style: { display: window.innerWidth < 992 ? 'none' : 'flex' }, children: items.filter((_, i) => i % 3 === 2).map((item) => (_jsx(GalleryItemComponent, { item: item, onImageClick: onImageClick, onFavoriteToggle: onFavoriteToggle, onImageRemove: onImageRemove, animationType: animation }, item.id))) })] }));
    }
    // Carousel layout
    return (_jsx("div", { className: "rag-carousel-container rag-mb-4", children: _jsx("div", { className: "rag-carousel", children: items.map((item) => (_jsx("div", { className: "rag-carousel-item", children: _jsx(GalleryItemComponent, { item: item, onImageClick: onImageClick, onFavoriteToggle: onFavoriteToggle, onImageRemove: onImageRemove, animationType: animation }) }, item.id))) }) }));
}