{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/hZ4jZhvp9Pq42sQ5tafe/c6dpINNluVeNvs1mg0rb/MasonryGallery.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import React,{useEffect,useRef,useState}from\"react\";import{motion}from\"framer-motion\";export function MasonryGallery(props){const{content,columns,gap,width,height,...rest}=props;const containerRef=useRef(null);const[columnElements,setColumnElements]=useState([]);const[visibleItems,setVisibleItems]=useState({});const containerStyle={width:width,height:height,background:\"#F3F3F3\",borderRadius:6,overflow:\"hidden\",position:\"relative\"};const masonryStyle={display:\"flex\",width:\"100%\",height:\"100%\",overflowY:\"auto\",gap:`${gap}px`,padding:`${gap}px`,boxSizing:\"border-box\"};const columnStyle={display:\"flex\",flexDirection:\"column\",flex:1,gap:`${gap}px`};useEffect(()=>{if(content.length>0&&containerRef.current){const columnItems=Array.from({length:columns},()=>[]);content.forEach((item,index)=>{const columnIndex=index%columns;columnItems[columnIndex].push(item);});setColumnElements(columnItems);}},[content,columns,gap]);useEffect(()=>{const observer=new IntersectionObserver(entries=>{const updatedVisibleItems={...visibleItems};entries.forEach(entry=>{const index=entry.target.getAttribute(\"data-index\");if(entry.isIntersecting){updatedVisibleItems[index]=true// Marcamos como visible y ya no se desanima\n;}});setVisibleItems(updatedVisibleItems);},{threshold:.1});const items=document.querySelectorAll(\".masonry-item\");items.forEach(item=>observer.observe(item));return()=>observer.disconnect();},[columnElements,visibleItems]);if(content.length===0){return /*#__PURE__*/_jsx(\"div\",{style:containerStyle,...rest,children:/*#__PURE__*/_jsxs(\"div\",{style:{...containerStyle,display:\"flex\",flexDirection:\"column\",alignItems:\"center\",justifyContent:\"center\",color:\"#8855FF\",fontSize:13,fontWeight:500,border:\"1px dashed #8855FF\"},children:[/*#__PURE__*/_jsxs(\"svg\",{width:\"24\",height:\"24\",viewBox:\"0 0 24 24\",fill:\"none\",xmlns:\"http://www.w3.org/2000/svg\",children:[/*#__PURE__*/_jsx(\"path\",{fillRule:\"evenodd\",clipRule:\"evenodd\",d:\"M9 3.5C9 3.22386 9.22386 3 9.5 3H14.5C14.7761 3 15 3.22386 15 3.5V5H17.5C18.8807 5 20 6.11929 20 7.5V18.5C20 19.8807 18.8807 21 17.5 21H6.5C5.11929 21 4 19.8807 4 18.5V7.5C4 6.11929 5.11929 5 6.5 5H9V3.5ZM10 5H14V4H10V5ZM6.5 6C5.67157 6 5 6.67157 5 7.5V18.5C5 19.3284 5.67157 20 6.5 20H17.5C18.3284 20 19 19.3284 19 18.5V7.5C19 6.67157 18.3284 6 17.5 6H6.5Z\",fill:\"#8855FF\"}),/*#__PURE__*/_jsx(\"path\",{d:\"M12 9.5C12 10.3284 11.3284 11 10.5 11C9.67157 11 9 10.3284 9 9.5C9 8.67157 9.67157 8 10.5 8C11.3284 8 12 8.67157 12 9.5Z\",fill:\"#8855FF\"}),/*#__PURE__*/_jsx(\"path\",{fillRule:\"evenodd\",clipRule:\"evenodd\",d:\"M6.25879 18.0001L11.3975 11.3959C11.7819 10.9281 12.4644 10.8661 12.9229 11.2622L17.5487 15.3357L17.935 14.6438C18.2534 14.0967 18.9936 13.9338 19.5407 14.2522C20.0878 14.5706 20.2507 15.3108 19.9323 15.8579L18.208 18.7636C18.0812 18.9792 17.8843 19.1402 17.6538 19.2181C17.4232 19.296 17.1734 19.2862 16.9496 19.1902C16.7258 19.0943 16.5443 18.9182 16.4366 18.6917C16.329 18.4652 16.3018 18.2034 16.3597 17.9574L12.0326 14.1858L7.91648 19.4078C7.52224 19.9164 6.80212 19.9986 6.30269 19.5963C5.80327 19.194 5.73766 18.4739 6.14775 17.9823L6.25879 18.0001Z\",fill:\"#8855FF\"})]}),/*#__PURE__*/_jsx(\"p\",{style:{marginTop:8},children:\"Connect to Content\"}),/*#__PURE__*/_jsx(\"p\",{style:{fontSize:11,color:\"#8855FF99\",marginTop:4},children:\"Add layers or components to display masonry grid\"})]})});}return /*#__PURE__*/_jsx(\"div\",{style:containerStyle,...rest,children:/*#__PURE__*/_jsx(\"div\",{style:masonryStyle,ref:containerRef,children:columnElements.map((column,columnIndex)=>/*#__PURE__*/_jsx(\"div\",{style:columnStyle,children:column.map((item,itemIndex)=>/*#__PURE__*/_jsx(motion.div,{className:\"masonry-item\",\"data-index\":`${columnIndex}-${itemIndex}`,style:{width:\"100%\"},initial:{opacity:0,scale:.5},animate:visibleItems[`${columnIndex}-${itemIndex}`]?{opacity:1,scale:1}:{opacity:0,scale:.5},transition:{duration:.5,delay:(itemIndex+columnIndex)*.1},children:/*#__PURE__*/React.isValidElement(item)&&/*#__PURE__*/React.cloneElement(item,{style:{...item.props.style,width:\"100%\",height:\"auto\",objectFit:\"cover\",borderRadius:4}})},`item-${itemIndex}`))},`column-${columnIndex}`))})});}MasonryGallery.defaultProps={width:400,height:600,content:[],columns:3,gap:10};addPropertyControls(MasonryGallery,{content:{type:ControlType.Array,control:{type:ControlType.ComponentInstance},title:\"Content\"},columns:{type:ControlType.Number,defaultValue:3,min:1,max:6,step:1,title:\"Columns\"},gap:{type:ControlType.Number,defaultValue:10,min:0,max:100,step:1,title:\"Gap\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"MasonryGallery\":{\"type\":\"reactComponent\",\"name\":\"MasonryGallery\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./MasonryGallery.map"],
  "mappings": "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",
  "names": ["MasonryGallery", "props", "content", "columns", "gap", "width", "height", "rest", "containerRef", "pe", "columnElements", "setColumnElements", "ye", "visibleItems", "setVisibleItems", "containerStyle", "masonryStyle", "columnStyle", "ue", "columnItems", "item", "index", "columnIndex", "observer", "entries", "updatedVisibleItems", "entry", "p", "u", "column", "itemIndex", "motion", "e", "addPropertyControls", "ControlType"]
}