{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/UYXuRmSFYGyCBx02Rg4T/RGCjpscmS56FtFxIJEGI/ImageLatestEvante.js"],
  "sourcesContent": ["// Welcome to Code in Framer\n// Get Started: https://www.framer.com/developers/\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{useState,useEffect}from\"react\";import{motion}from\"framer-motion\";import{createStore}from\"https://framer.com/m/framer/store.js@^1.0.0\";/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/developers/#code-components-auto-sizing\n *\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */const useStore=createStore({hovered:1,blocks:[]});export function getBlocks(Component){return props=>{try{const[store,setStore]=useStore();const blocks=store.blocks;useEffect(()=>{const image=props.children[0].props.children.props.background.src;const title=props.children[1].props.text;const category=props.children[2].props.text;const href=props.href;const index=blocks.findIndex(block=>block.title===title);if(index===-1){setStore({blocks:[...blocks,{id:blocks.length+1,image,title,category,href}]});}},[props,blocks,setStore]);}catch(err){console.log(err);}return /*#__PURE__*/_jsx(_Fragment,{});};}export default function ImageLatestEvante(props){// This is a React component containing an Example component\n// - Replace <Example /> with your own code\n// - Find inspiration: https://www.framer.com/developers/\nconst[hoveredIndex,setHoveredIndex]=useState(2);const[device,setDevice]=useState(1);const[store,setStore]=useStore();const blocks=store.blocks;useEffect(()=>{const handleResize=()=>{const width=window.innerWidth;width>=1440?setDevice(1):width>1200?setDevice(2):width>810?setDevice(3):width>425?setDevice(4):setDevice(5);};window.addEventListener(\"resize\",handleResize);// Call the handler immediately to set the initial state based on current window size\nhandleResize();// Cleanup function to remove the event listener on component unmount\nreturn()=>{window.removeEventListener(\"resize\",handleResize);};},[]);// console.log(props.title, props.image)\nconst mainDivStyle={display:\"flex\",gap:\"20px\",height:\"400px\",// backgroundColor: \"var(--bg-color)\",\nwidth:\"1280px\"};return /*#__PURE__*/_jsx(_Fragment,{children:/*#__PURE__*/_jsx(\"div\",{style:{...props.style,display:\"flex\",gap:\"20px\",height:device<3?\"400px\":\"fit-content\",// backgroundColor: \"var(--bg-color)\",\nwidth:device==1?\"1280px\":device==2?\"1040px\":\"100%\",// ...mainDivStyle,\nflexDirection:device>=3?\"column\":\"row\"},children:blocks.map((block,index)=>{return device<3?/*#__PURE__*/_jsx(motion.div,{style:{width:hoveredIndex==block.id?\"732px\":\"250px\",// backgroundColor: \"red\",\nborderRadius:\"24px\",overflow:\"hidden\",transition:\".5s ease-in-out\",background:`url(${block.image}) center/cover no-repeat`},onHoverStart:()=>setHoveredIndex(block.id),children:/*#__PURE__*/_jsxs(motion.div,{style:{minWidth:\"100%\",minHeight:\"100%\",background:\"rgba(13, 13, 18, 0.5)\",backdropFilter:hoveredIndex===block.id?\"blur(0px)\":\"blur(10px)\",padding:\"32px\",display:\"flex\",flexDirection:\"column\",alignItems:\"start\",justifyContent:\"space-between\"},onClick:()=>{window.location=block.href;},children:[/*#__PURE__*/_jsx(motion.span,{style:{textTransform:\"uppercase\",border:\"1px solid #FFFFFF14\",padding:\"8px 10px 8px 8px\",color:\"#FFFFFF\",borderRadius:\"8px\",backgroundColor:\"#FFFFFF1F\",backdropFilter:\"blur(12px)\",display:\"inline-block\",fontFamily:\"Open Sauce One Medium\"},children:block.category}),hoveredIndex===block.id&&/*#__PURE__*/_jsx(motion.div,{initial:{opacity:0,y:10},animate:{opacity:hoveredIndex===block.id?1:0,y:hoveredIndex===block.id?0:10},transition:{duration:.3,delay:hoveredIndex===block.id?.5:0,ease:\"easeInOut\"},style:{display:\"flex\",flexDirection:\"column\",gap:\"18px\",overflow:\"hidden\"},children:/*#__PURE__*/_jsx(motion.div,{style:{font:\"32px Open Sauce One SemiBold\",color:\"#FFFFFF\",lineHeight:\"35.84px\",letterSpacing:\"-3%\"},children:block.title})})]})}):/*#__PURE__*/_jsx(motion.div,{style:{width:device==3?\"500px\":device==2?\"400px\":\"331px\",height:device==3?\"350px\":\"230px\",borderRadius:\"24px\",overflow:\"hidden\",transition:\".5s ease-in-out\",background:`url(${block.image}) center/cover no-repeat`},children:/*#__PURE__*/_jsxs(motion.div,{style:{minWidth:\"100%\",minHeight:\"100%\",background:\"rgba(13, 13, 18, 0.5)\",padding:\"24px 20px 20px 20px\",display:\"flex\",flexDirection:\"column\",alignItems:\"start\",justifyContent:\"space-between\"},onClick:()=>{window.location=block.href;},children:[/*#__PURE__*/_jsx(motion.span,{style:{textTransform:\"uppercase\",border:\"1px solid #FFFFFF14\",padding:\"4px 10px 4px 8px\",color:\"#FFFFFF\",borderRadius:\"1px\",backgroundColor:\"#FFFFFF1F\",backdropFilter:\"blur(12px)\",display:\"inline-block\",fontFamily:\"8px Open Sauce One Medium\"},children:block.category}),/*#__PURE__*/_jsx(motion.div,{style:{font:\"16px Open Sauce One SemiBold\",color:\"#FFFFFF\",lineHeight:\"20.8px\",letterSpacing:\"-3%\",opacity:\"1\"},children:block.title})]})});})})});}// <img src={block.image} alt=\"img\" />\n// Styles are written in object syntax\n// Learn more: https://reactjs.org/docs/dom-elements.html#style\n// addPropertyControls(getBlocks, {\n//     title: { type: ControlType.String, title: \"Title\" },\n//     image: { type: ControlType.Image, title: \"Image\" },\n//     category: { type: ControlType.String, title: \"Category\" },\n//     url: { type: ControlType.String, title: \"Link\" },\n// })\n//    <motion.div\n//                                         style={{\n//                                             font: \"16px Open Sauce One Regular\",\n//                                             color: \"#FFFFFF\",\n//                                             lineHeight: \"24px\",\n//                                             letterSpacing: \"-2%\",\n//                                         }}\n//                                     >\n//                                         {block.description}\n//                                     </motion.div>\n\nexport const __FramerMetadata__ = {\"exports\":{\"getBlocks\":{\"type\":\"reactHoc\",\"name\":\"getBlocks\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageLatestEvante\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageLatestEvante.map"],
  "mappings": "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",
  "names": ["useStore", "createStore", "getBlocks", "Component", "props", "store", "setStore", "blocks", "ue", "image", "title", "category", "href", "block", "err", "p", "l", "ImageLatestEvante", "hoveredIndex", "setHoveredIndex", "ye", "device", "setDevice", "handleResize", "width", "window", "mainDivStyle", "index", "motion", "u"]
}