react-advanced-gallery
Version:
A customizable React image gallery component with Bootstrap styling, fullscreen mode, animations, and support for various media types
17 lines (16 loc) • 2.98 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function GalleryConfig({ layout, animation, thumbnailsPosition, enableZoom, onConfigChange }) {
const handleLayoutChange = (value) => {
onConfigChange({ layout: value });
};
const handleAnimationChange = (value) => {
onConfigChange({ animation: value });
};
const handleThumbnailsPositionChange = (value) => {
onConfigChange({ thumbnailsPosition: value });
};
const handleZoomToggle = () => {
onConfigChange({ enableZoom: !enableZoom });
};
return (_jsx("div", { className: "rag-config rag-mb-4", children: _jsxs("div", { className: "rag-config-header", children: [_jsxs("div", { children: [_jsx("h2", { className: "rag-config-title", children: "Gallery Configuration" }), _jsx("p", { className: "rag-config-subtitle", children: "Customize your gallery experience" })] }), _jsxs("div", { className: "rag-config-controls", children: [_jsxs("div", { className: "rag-config-group", children: [_jsx("label", { htmlFor: "layout-select", className: "rag-config-label", children: "Layout:" }), _jsxs("select", { id: "layout-select", value: layout, onChange: (e) => handleLayoutChange(e.target.value), className: "rag-config-select", children: [_jsx("option", { value: "grid", children: "Grid" }), _jsx("option", { value: "masonry", children: "Masonry" }), _jsx("option", { value: "carousel", children: "Carousel" })] })] }), _jsxs("div", { className: "rag-config-group", children: [_jsx("label", { htmlFor: "animation-select", className: "rag-config-label", children: "Animation:" }), _jsxs("select", { id: "animation-select", value: animation, onChange: (e) => handleAnimationChange(e.target.value), className: "rag-config-select", children: [_jsx("option", { value: "fade", children: "Fade" }), _jsx("option", { value: "slide", children: "Slide" }), _jsx("option", { value: "zoom", children: "Zoom" }), _jsx("option", { value: "none", children: "None" })] })] }), _jsxs("div", { className: "rag-config-group", children: [_jsx("label", { htmlFor: "thumbnails-select", className: "rag-config-label", children: "Thumbnails:" }), _jsxs("select", { id: "thumbnails-select", value: thumbnailsPosition, onChange: (e) => handleThumbnailsPositionChange(e.target.value), className: "rag-config-select", children: [_jsx("option", { value: "bottom", children: "Bottom" }), _jsx("option", { value: "top", children: "Top" }), _jsx("option", { value: "left", children: "Left" }), _jsx("option", { value: "right", children: "Right" })] })] }), _jsxs("div", { className: "rag-config-group", children: [_jsx("label", { htmlFor: "zoom-toggle", className: "rag-config-label", children: "Enable Zoom:" }), _jsxs("label", { className: "rag-toggle", children: [_jsx("input", { type: "checkbox", id: "zoom-toggle", checked: enableZoom, onChange: handleZoomToggle, className: "rag-toggle-input" }), _jsx("span", { className: "rag-toggle-slider" })] })] })] })] }) }));
}