{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\user\\\\Desktop\\\\05portreact\\\\src\\\\components\\\\pages\\\\design\\\\cardCrea.js\";\nimport React, { Component } from 'react';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nclass CardCrea extends Component {\n  constructor(props) {\n    super(props);\n    this.handleMouseMove = e => {\n      const {\n        offsetLeft,\n        offsetTop\n      } = this.cardRef.current;\n      const {\n        width,\n        height\n      } = this.state;\n      this.setState({\n        mouseX: e.pageX - offsetLeft - width / 2,\n        mouseY: e.pageY - offsetTop - height / 2\n      });\n    };\n    this.handleMouseEnter = () => {\n      clearTimeout(this.state.mouseLeaveDelay);\n    };\n    this.handleMouseLeave = () => {\n      const mouseLeaveDelay = setTimeout(() => {\n        this.setState({\n          mouseX: 0,\n          mouseY: 0\n        });\n      }, 1000);\n      this.setState({\n        mouseLeaveDelay\n      });\n    };\n    this.state = {\n      width: 0,\n      height: 0,\n      mouseX: 0,\n      mouseY: 0,\n      mouseLeaveDelay: null\n    };\n    this.cardRef = /*#__PURE__*/React.createRef();\n  }\n  componentDidMount() {\n    this.setState({\n      width: this.cardRef.current.offsetWidth,\n      height: this.cardRef.current.offsetHeight\n    });\n  }\n  render() {\n    const {\n      dataImage\n    } = this.props;\n    const {\n      mouseX,\n      mouseY,\n      width,\n      height\n    } = this.state;\n    const cardStyle = {\n      transform: `rotateY(${mouseX / width * 55}deg) rotateX(${mouseY / height * 3}deg)`\n    };\n    const cardBgTransform = {\n      transform: `translateX(${mouseX / width * -40}px) translateY(${mouseY / height * 100}px)`\n    };\n    const cardBgImage = {\n      backgroundImage: `url(${dataImage})`\n    };\n    return /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"card-wrap\",\n      onMouseMove: this.handleMouseMove,\n      onMouseEnter: this.handleMouseEnter,\n      onMouseLeave: this.handleMouseLeave,\n      ref: this.cardRef,\n      children: /*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"card\",\n        style: cardStyle,\n        children: [/*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"card-bg\",\n          style: {\n            ...cardBgTransform,\n            ...cardBgImage\n          }\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 77,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"card-info\",\n          children: this.props.children\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 78,\n          columnNumber: 11\n        }, this)]\n      }, void 0, true, {\n        fileName: _jsxFileName,\n        lineNumber: 76,\n        columnNumber: 9\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 69,\n      columnNumber: 7\n    }, this);\n  }\n}\nexport default CardCrea;","map":{"version":3,"names":["React","Component","jsxDEV","_jsxDEV","CardCrea","constructor","props","handleMouseMove","e","offsetLeft","offsetTop","cardRef","current","width","height","state","setState","mouseX","pageX","mouseY","pageY","handleMouseEnter","clearTimeout","mouseLeaveDelay","handleMouseLeave","setTimeout","createRef","componentDidMount","offsetWidth","offsetHeight","render","dataImage","cardStyle","transform","cardBgTransform","cardBgImage","backgroundImage","className","onMouseMove","onMouseEnter","onMouseLeave","ref","children","style","fileName","_jsxFileName","lineNumber","columnNumber"],"sources":["C:/Users/user/Desktop/05portreact/src/components/pages/design/cardCrea.js"],"sourcesContent":["\r\nimport React, { Component } from 'react';\r\n\r\nclass CardCrea extends Component {\r\n  constructor(props) {\r\n    super(props);\r\n\r\n    this.state = {\r\n      width: 0,\r\n      height: 0,\r\n      mouseX: 0,\r\n      mouseY: 0,\r\n      mouseLeaveDelay: null,\r\n    };\r\n\r\n    this.cardRef = React.createRef();\r\n  }\r\n\r\n  componentDidMount() {\r\n    this.setState({\r\n      width: this.cardRef.current.offsetWidth,\r\n      height: this.cardRef.current.offsetHeight,\r\n    });\r\n  }\r\n\r\n  handleMouseMove = (e) => {\r\n    const { offsetLeft, offsetTop } = this.cardRef.current;\r\n    const { width, height } = this.state;\r\n\r\n    this.setState({\r\n      mouseX: e.pageX - offsetLeft - width / 2,\r\n      mouseY: e.pageY - offsetTop - height / 2,\r\n    });\r\n  };\r\n\r\n  handleMouseEnter = () => {\r\n    clearTimeout(this.state.mouseLeaveDelay);\r\n  };\r\n\r\n  handleMouseLeave = () => {\r\n    const mouseLeaveDelay = setTimeout(() => {\r\n      this.setState({\r\n        mouseX: 0,\r\n        mouseY: 0,\r\n      });\r\n    }, 1000);\r\n\r\n    this.setState({ mouseLeaveDelay });\r\n  };\r\n\r\n  render() {\r\n    const { dataImage } = this.props;\r\n    const { mouseX, mouseY, width, height } = this.state;\r\n\r\n    const cardStyle = {\r\n        \r\n      transform: `rotateY(${mouseX / width * 55}deg) rotateX(${mouseY / height * 3}deg)`,\r\n    };\r\n\r\n    const cardBgTransform = {\r\n      transform: `translateX(${mouseX / width * -40}px) translateY(${mouseY / height *100}px)`,\r\n    };\r\n\r\n    const cardBgImage = {\r\n      backgroundImage: `url(${dataImage})`,\r\n    };\r\n\r\n    return (\r\n      <div\r\n        className=\"card-wrap\"\r\n        onMouseMove={this.handleMouseMove}\r\n        onMouseEnter={this.handleMouseEnter}\r\n        onMouseLeave={this.handleMouseLeave}\r\n        ref={this.cardRef}\r\n      >\r\n        <div className=\"card\" style={cardStyle}>\r\n          <div className=\"card-bg\" style={{...cardBgTransform ,...cardBgImage }}></div>\r\n          <div className=\"card-info\">\r\n            {this.props.children}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\nexport default CardCrea;\r\n\r\n\r\n"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}