{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/aTtAux29crGMzywyrxYr/5H1jmkAESa7bHdg3RdfM/ReactSlider.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useRef,useEffect}from\"react\";import{inView,motion}from\"framer-motion\";import{addPropertyControls,ControlType}from\"framer\";/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/developers/#code-components-auto-sizing\n *\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function Slider({imageOne,imageTwo,children}){// 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[leftInView,setLeftInView]=useState(false);const[rightInView,setRightInView]=useState(false);const[moveX,setMoveX]=useState(0);const[isMobile,setIsMobile]=useState(false);const refLeft=useRef(null);const refRight=useRef(null);function handleLeftClick(){setMoveX(moveX=>moveX+366);setRightInView(false);}function handleRightClick(){setMoveX(moveX=>moveX-366);setLeftInView(false);}useEffect(function(){inView(refLeft.current,()=>{setLeftInView(true);});inView(refRight.current,()=>{setRightInView(true);});const mobile=window.innerWidth<900;if(mobile){setIsMobile(true);}else{setIsMobile(false);}},[leftInView,rightInView,inView,moveX,setIsMobile]);return /*#__PURE__*/_jsxs(\"div\",{style:containerStyle,children:[!isMobile&&/*#__PURE__*/_jsx(Button,{image:imageOne,isInView:leftInView,onClick:handleLeftClick}),/*#__PURE__*/_jsx(\"div\",{style:isMobile?silderStyleMobile:silderStyle,children:/*#__PURE__*/_jsxs(motion.div,{animate:{x:moveX},transition:{type:\"srping\",damping:\"900\",duration:.7},style:sliderContainer,children:[/*#__PURE__*/_jsx(\"div\",{style:sliderEmptyBlock,ref:refLeft}),children,/*#__PURE__*/_jsx(\"div\",{style:sliderEmptyBlock,ref:refRight})]})}),!isMobile&&/*#__PURE__*/_jsx(Button,{image:imageTwo,isInView:rightInView,onClick:handleRightClick})]});}function Button({image,isInView,onClick}){const[mouseEnter,setMouseEnter]=useState(false);function handleHoverIn(){setMouseEnter(true);}function handleHoverOut(){setMouseEnter(false);}return /*#__PURE__*/_jsx(\"button\",{onClick:onClick,disabled:isInView,style:!mouseEnter?buttonStyle:buttonStyleHover,onMouseEnter:handleHoverIn,onMouseLeave:handleHoverOut,children:/*#__PURE__*/_jsx(\"img\",{src:image.src,alt:image.alt,style:isInView?imageStyleDisabled:imageStyle})});}// Styles are written in object syntax\n// Learn more: https://reactjs.org/docs/dom-elements.html#style\nconst containerStyle={width:\"100%\",display:\"flex\",justifyContent:\"center\",alignItems:\"center\",paddingTop:\"20px\",paddingBottom:\"20px\",overflow:\"hidden\",gap:\"0px\"};const silderStyle={width:\"100%\",display:\"flex\",justifyContent:\"flex-start\",alignItems:\"center\",gap:\"0px\",overflow:\"hidden\",paddingTop:\"20px\",paddingBottom:\"20px\"};const silderStyleMobile={width:\"100%\",display:\"flex\",justifyContent:\"flex-start\",alignItems:\"center\",gap:\"0px\",overflow:\"auto\",paddingTop:\"20px\",paddingBottom:\"20px\"};const sliderContainer={display:\"flex\",justifyContent:\"flex-start\",alignItems:\"center\",wrap:\"now-rap\",width:\"fit-content\",height:\"fit-content\",gap:\"0px\",minWdith:\"100px\",touchAction:\"pan-x pan-y\"};const sliderEmptyBlock={width:\"2px\",height:\"20px\",border:\"none\"};const buttonStyle={width:\"60px\",height:\"60px\",backgroundColor:\"transparent\",border:\"none\",transition:\"transform .3s\"};const buttonStyleHover={width:\"60px\",height:\"60px\",backgroundColor:\"transparent\",border:\"none\",transform:\"scale(0.9)\",transition:\"transform .3s\"};const imageStyle={width:\"100%\",objectFit:\"cover\",cursor:\"pointer\"};const imageStyleDisabled={width:\"100%\",objectFit:\"cover\",filter:\"greyscale(1)\",cursor:\"not-allowed\",opacity:\"0.6\"};addPropertyControls(Slider,{imageOne:{type:ControlType.ResponsiveImage,defaultValue:\"\"},imageTwo:{type:ControlType.ResponsiveImage,defaultValue:\"\"},children:{type:ControlType.ComponentInstance}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Slider\",\"slots\":[\"children\"],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\",\"framerSupportedLayoutWidth\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ReactSlider.map"],
  "mappings": "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",
  "names": ["Slider", "imageOne", "imageTwo", "children", "leftInView", "setLeftInView", "ye", "rightInView", "setRightInView", "moveX", "setMoveX", "isMobile", "setIsMobile", "refLeft", "pe", "refRight", "handleLeftClick", "handleRightClick", "ue", "inView", "mobile", "window", "u", "containerStyle", "p", "Button", "silderStyleMobile", "silderStyle", "motion", "sliderContainer", "sliderEmptyBlock", "image", "isInView", "onClick", "mouseEnter", "setMouseEnter", "handleHoverIn", "handleHoverOut", "buttonStyleHover", "buttonStyle", "imageStyleDisabled", "imageStyle", "addPropertyControls", "ControlType"]
}