{"version":3,"file":"ImageGrid.Btx8vcWf.mjs","names":["useMemo","useState","useRef"],"sources":["https:/framerusercontent.com/modules/sMERgI7BXn8jjg5WdaPH/0JeDAtiO5RoeLxqAaFLA/ImageGrid.js"],"sourcesContent":["// Irregular image grid with CMS data integration\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{useMemo,useState,useEffect,useRef}from\"react\";import{motion,useInView}from\"framer-motion\";/**\n * Irregular Image Grid with CMS Integration\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */export default function ImageGrid(props){const{images=[{image:{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Image 1\"}},{image:{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Image 2\"}},{image:{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Image 3\"}},{image:{src:\"https://framerusercontent.com/images/2uTNEj5aTl2K3NJaEFWMbnrA.jpg\",alt:\"Image 4\"}},{image:{src:\"https://framerusercontent.com/images/f9RiWoNpmlCMqVRIHz8l8wYfeI.jpg\",alt:\"Image 5\"}},{image:{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Image 6\"}}],columns=3,rowgap=16,colgap=16,borderRadius=12}=props;const gridItems=useMemo(()=>{const spanPatterns=[1,2,1,1,2,1,1,1,2,1];return images.map((item,index)=>({...item,span:item.span||spanPatterns[index%spanPatterns.length]}));},[images]);const gridStyle={display:\"grid\",gridTemplateColumns:`repeat(${columns}, 1fr)`,gridAutoRows:\"minmax(200px, auto)\",rowGap:`${rowgap}px`,columnGap:`${colgap}px`,width:\"100%\",minHeight:\"200px\"};return /*#__PURE__*/_jsx(\"div\",{style:{...props.style,width:\"100%\",height:\"100%\",minHeight:\"200px\",position:\"relative\"},children:/*#__PURE__*/_jsx(\"div\",{style:gridStyle,children:gridItems.map((item,index)=>/*#__PURE__*/_jsx(ImageGridItem,{item:item,columns:columns,borderRadius:borderRadius},index))})});}function ImageGridItem({item,columns,borderRadius}){const[aspectRatio,setAspectRatio]=useState(\"1\");const ref=useRef(null);const isInView=useInView(ref,{once:true,amount:.01});// Check if we're in the canvas for editing\nconst isCanvas=RenderTarget.current()===RenderTarget.canvas;useEffect(()=>{const img=new Image;img.onload=()=>{const ratio=img.naturalWidth/img.naturalHeight;setAspectRatio(ratio.toString());};img.src=item.image?.src||\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\";},[item.image?.src]);return /*#__PURE__*/_jsx(motion.div,{ref:ref,initial:{opacity:isCanvas?1:0},animate:{opacity:isCanvas?1:isInView?1:0},transition:{duration:isCanvas?0:2,ease:\"easeInOut\"},style:{position:\"relative\",gridColumn:`span ${Math.min(item.span,columns)}`,gridRow:`span ${item.rowSpan||1}`,aspectRatio:aspectRatio,borderRadius:`${borderRadius}px`,overflow:\"hidden\",backgroundColor:\"#f0f0f0\"},children:/*#__PURE__*/_jsx(\"img\",{src:item.image?.src||\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:item.image?.alt||\"Default image\",style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",display:\"block\",opacity:1}})});}addPropertyControls(ImageGrid,{images:{type:ControlType.Array,title:\"Images\",control:{type:ControlType.Object,controls:{image:{type:ControlType.ResponsiveImage,title:\"Image\"},span:{type:ControlType.Number,title:\"Column Span\",defaultValue:1,min:1,max:6,step:1},rowSpan:{type:ControlType.Number,title:\"Row Span\",defaultValue:1,min:1,max:4,step:1}}},maxCount:40,defaultValue:[{image:{src:\"https://framerusercontent.com/images/GfGkADagM4KEibNcIiRUWlfrR0.jpg\",alt:\"Image 1\"}},{image:{src:\"https://framerusercontent.com/images/aNsAT3jCvt4zglbWCUoFe33Q.jpg\",alt:\"Image 2\"}},{image:{src:\"https://framerusercontent.com/images/BYnxEV1zjYb9bhWh1IwBZ1ZoS60.jpg\",alt:\"Image 3\"}}]},columns:{type:ControlType.Number,title:\"Columns\",defaultValue:3,min:1,max:6,step:1},rowgap:{type:ControlType.Number,title:\"Row Gap\",defaultValue:16,min:0,max:200,step:2,unit:\"px\"},colgap:{type:ControlType.Number,title:\"Col Gap\",defaultValue:16,min:0,max:200,step:2,unit:\"px\"},borderRadius:{type:ControlType.Number,title:\"Border Radius\",defaultValue:12,min:0,max:32,step:1,unit:\"px\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageGrid\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageGrid.map"],"mappings":"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"}