{"version":3,"file":"ProductGallery.B511BeeM.mjs","names":["useState","startTransition"],"sources":["https:/framerusercontent.com/modules/pEX7pJ08N1e5keoIg9Rh/0PDH8zkA1vISXTv5sYJc/ProductGallery.js"],"sourcesContent":["// Responsive product gallery component for e-commerce product page with vertical thumbnails on left, main image on right, smooth transitions, and mobile-friendly horizontal scrolling\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,startTransition}from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{motion,AnimatePresence}from\"framer-motion\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function ProductGallery(props){const{images=[],thumbnailSize,thumbnailGap,borderRadius,shadowIntensity,activeBorderColor,activeBorderWidth,hoverOpacity,transitionDuration,style}=props;const[selectedIndex,setSelectedIndex]=useState(0);const[hoveredIndex,setHoveredIndex]=useState(null);// Safety check: ensure we have images and selectedIndex is valid\nconst hasImages=images&&images.length>0;const safeSelectedIndex=hasImages&&selectedIndex<images.length?selectedIndex:0;const selectedImage=hasImages?images[safeSelectedIndex]:null;const handleThumbnailClick=index=>{startTransition(()=>setSelectedIndex(index));};const shadowStyle=`0 ${shadowIntensity}px ${shadowIntensity*2}px rgba(0, 0, 0, ${shadowIntensity*.02})`;// If no images, show placeholder\nif(!hasImages){return /*#__PURE__*/_jsx(\"div\",{style:{...style,width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",backgroundColor:\"#f8f8f8\",borderRadius,color:\"#999\",fontSize:14},children:\"Add images to display gallery\"});}return /*#__PURE__*/_jsxs(\"div\",{style:{...style,width:\"100%\",height:\"100%\",display:\"flex\",flexDirection:\"row\",gap:24,padding:0,position:\"relative\"},children:[/*#__PURE__*/_jsx(\"style\",{children:`\n          @media (max-width: 768px) {\n            .product-gallery-container {\n              flex-direction: column-reverse !important;\n            }\n            .thumbnails-container {\n              flex-direction: row !important;\n              overflow-x: auto !important;\n              overflow-y: hidden !important;\n              width: 100% !important;\n              height: auto !important;\n              padding-bottom: 8px;\n            }\n            .thumbnails-container::-webkit-scrollbar {\n              height: 4px;\n            }\n            .thumbnails-container::-webkit-scrollbar-track {\n              background: #f1f1f1;\n              border-radius: 2px;\n            }\n            .thumbnails-container::-webkit-scrollbar-thumb {\n              background: #888;\n              border-radius: 2px;\n            }\n            .thumbnails-container::-webkit-scrollbar-thumb:hover {\n              background: #555;\n            }\n          }\n          @media (min-width: 769px) and (max-width: 1024px) {\n            .product-gallery-container {\n              gap: 16px !important;\n            }\n          }\n        `}),/*#__PURE__*/_jsxs(\"div\",{className:\"product-gallery-container\",style:{display:\"flex\",gap:24,width:\"100%\",height:\"100%\"},children:[/*#__PURE__*/_jsx(\"div\",{className:\"thumbnails-container\",style:{display:\"flex\",flexDirection:\"column\",gap:thumbnailGap,overflowY:\"auto\",overflowX:\"hidden\",height:\"100%\",scrollbarWidth:\"thin\",scrollbarColor:\"#888 #f1f1f1\"},children:images.map((image,index)=>{const isActive=index===safeSelectedIndex;const isHovered=index===hoveredIndex;return /*#__PURE__*/_jsx(\"button\",{onClick:()=>handleThumbnailClick(index),onMouseEnter:()=>startTransition(()=>setHoveredIndex(index)),onMouseLeave:()=>startTransition(()=>setHoveredIndex(null)),style:{width:thumbnailSize,height:thumbnailSize,minWidth:thumbnailSize,minHeight:thumbnailSize,borderRadius,overflow:\"hidden\",cursor:\"pointer\",border:isActive?`${activeBorderWidth}px solid ${activeBorderColor}`:`${activeBorderWidth}px solid transparent`,boxShadow:shadowStyle,transition:`all ${transitionDuration}s ease`,opacity:isHovered&&!isActive?hoverOpacity:1,padding:0,background:\"transparent\",position:\"relative\"},\"aria-label\":`View ${image?.alt||\"product image\"}`,\"aria-pressed\":isActive,children:/*#__PURE__*/_jsx(\"img\",{src:image?.src||\"\",srcSet:image?.srcSet,alt:image?.alt||\"Product image\",style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\"}})},index);})}),/*#__PURE__*/_jsx(\"div\",{style:{flex:1,position:\"relative\",borderRadius,overflow:\"hidden\",boxShadow:shadowStyle,backgroundColor:\"#f8f8f8\",minHeight:300},children:selectedImage&&/*#__PURE__*/_jsx(AnimatePresence,{mode:\"wait\",children:/*#__PURE__*/_jsx(motion.img,{src:selectedImage.src,srcSet:selectedImage.srcSet,alt:selectedImage.alt||\"Product image\",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:transitionDuration},style:{width:\"100%\",height:\"100%\",objectFit:\"contain\",display:\"block\"}},safeSelectedIndex)})})]})]});}addPropertyControls(ProductGallery,{images:{type:ControlType.Array,control:{type:ControlType.ResponsiveImage},defaultValue:[{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Product view 1\"},{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Product view 2\"},{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Product view 3\"},{src:\"https://framerusercontent.com/images/2uTNEj5aTl2K3NJaEFWMbnrA.jpg\",alt:\"Product view 4\"},{src:\"https://framerusercontent.com/images/f9RiWoNpmlCMqVRIHz8l8wYfeI.jpg\",alt:\"Product view 5\"},{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Product view 6\"}],maxCount:12},thumbnailSize:{type:ControlType.Number,title:\"Thumbnail Size\",defaultValue:80,min:50,max:150,step:5,unit:\"px\"},thumbnailGap:{type:ControlType.Number,title:\"Thumbnail Gap\",defaultValue:12,min:4,max:32,step:2,unit:\"px\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:8,min:0,max:32,step:1,unit:\"px\"},shadowIntensity:{type:ControlType.Number,title:\"Shadow Intensity\",defaultValue:4,min:0,max:20,step:1},activeBorderColor:{type:ControlType.Color,title:\"Active Border\",defaultValue:\"#000000\"},activeBorderWidth:{type:ControlType.Number,title:\"Border Width\",defaultValue:2,min:1,max:6,step:1,unit:\"px\"},hoverOpacity:{type:ControlType.Number,title:\"Hover Opacity\",defaultValue:.7,min:.3,max:1,step:.1},transitionDuration:{type:ControlType.Number,title:\"Transition Speed\",defaultValue:.3,min:.1,max:1,step:.1,unit:\"s\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ProductGallery\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ProductGallery.map"],"mappings":"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"}