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

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

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export function GalleryItem({ item, onImageClick, onFavoriteToggle, onImageRemove, animationType }) {
    const handleFavoriteClick = (e) => {
        e.stopPropagation();
        onFavoriteToggle(item);
    };
    const handleRemoveClick = (e) => {
        e.stopPropagation();
        onImageRemove(item);
    };
    const getAnimationClass = () => {
        if (animationType === 'none')
            return '';
        return `rag-${animationType}-enter`;
    };
    return (_jsxs("div", { className: `rag-item ${getAnimationClass()}`, onClick: () => onImageClick(item), children: [item.type === 'image' ? (_jsx("img", { src: item.src, alt: item.alt, className: "rag-item-image", loading: "lazy" })) : item.type === 'video' ? (_jsxs(_Fragment, { children: [_jsx("img", { src: item.thumbnail, alt: item.alt, className: "rag-item-image", loading: "lazy" }), _jsx("div", { className: "rag-item-badge rag-item-badge-video", children: "Video" })] })) : (_jsxs(_Fragment, { children: [_jsx("img", { src: item.thumbnail, alt: item.alt, className: "rag-item-image", loading: "lazy" }), _jsx("div", { className: "rag-item-badge rag-item-badge-external", children: "External" })] })), _jsxs("div", { className: "rag-item-caption", children: [_jsx("h3", { className: "rag-item-title", children: item.title }), _jsx("p", { className: "rag-item-description", children: item.description })] }), _jsxs("div", { className: "rag-item-actions", children: [_jsx("button", { className: `rag-btn rag-btn-favorite ${item.isFavorite ? 'active' : ''}`, onClick: handleFavoriteClick, "aria-label": item.isFavorite ? "Remove from favorites" : "Add to favorites", children: _jsx("span", { className: "rag-material-icons", children: item.isFavorite ? 'star' : 'star_border' }) }), _jsx("button", { className: "rag-btn rag-btn-remove", onClick: handleRemoveClick, "aria-label": "Remove image", children: _jsx("span", { className: "rag-material-icons", children: "delete" }) })] })] }));
}