{"ast":null,"code":"import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { jsxs as _jsxs } from \"react/jsx-runtime\";\nimport styles from './Strip.module.scss';\nimport cn from 'classnames';\nimport { forwardRef, useEffect, useRef, useState } from 'react';\nimport gsap from 'gsap';\nimport { useMouse } from 'beautiful-react-hooks'; // import FitText from '@kennethormandy/react-fittext'\n\nconst Strip = /*#__PURE__*/forwardRef(({\n  color,\n  title,\n  active,\n  onMouseEvent,\n  noneOpen\n}, ref) => {\n  const {\n    0: mouseIsOver,\n    1: setMouseHover\n  } = useState(false);\n  const [position, {\n    onMouseEnter,\n    onMouseLeave\n  }] = useMouse(ref);\n  const {\n    0: tl\n  } = useState(gsap.timeline({\n    paused: true\n  }));\n  const titleContainerRef = useRef();\n  const contentRef = useRef();\n  const discoverRef = useRef();\n  const discoverArrowRef = useRef();\n  onMouseEnter(() => {\n    if (active) setMouseHover(true);\n  });\n  onMouseLeave(() => {\n    setMouseHover(false);\n  });\n  useEffect(() => {\n    //console.log('Strip.js::26 title, mouseIsOver', title.split(' ')[0], mouseIsOver)\n    //const tl = gsap.timeline()\n    console.log('Strip.js::30 noneOpen', noneOpen);\n    onMouseEvent(mouseIsOver);\n    tl.clear();\n    let delay = 0; // - - - enlarge / shrink\n\n    tl.to(ref.current, {\n      duration: 0.8,\n      ease: 'power3.out',\n      flex: mouseIsOver ? 2 : noneOpen ? 1 : 0 //width: mouseIsOver ? window.innerWidth / 2 : window.innerWidth / 5,\n      //width: mouseIsOver ? window.innerWidth - 300 : (noneOpen ? '25%' : 200),\n\n    });\n    console.log('Strip.js::48 titleContainerRef.current.innerHeight', titleContainerRef.current.offsetHeight); // - - - anim title\n\n    tl.to(titleContainerRef.current, {\n      duration: 0.6,\n      ease: 'power3.out',\n      y: mouseIsOver ? -window.innerHeight * 0.5 + titleContainerRef.current.offsetHeight + 20 : noneOpen ? 0 : -window.innerHeight * 0.5,\n      x: noneOpen || mouseIsOver ? 0 : 20,\n      scale: mouseIsOver ? 1.5 : 1,\n      rotation: noneOpen || mouseIsOver ? 0 : 90,\n      transformOrigin: 'bottom left'\n    }, 0); // - - -\n\n    delay += mouseIsOver ? 0.2 : 0; // - - - show discover button\n\n    tl.to(discoverRef.current, {\n      duration: 0.5,\n      ease: 'power3.out',\n      opacity: mouseIsOver ? 1 : 0,\n      y: mouseIsOver ? 0 : 30\n    }, delay); // - - -\n\n    delay += 0.05; // - - - arrow\n\n    tl.to(discoverArrowRef.current, {\n      duration: 0.5,\n      ease: 'power3.out',\n      y: mouseIsOver ? 0 : 10\n    }, delay); // - - -\n\n    delay = mouseIsOver ? 0.3 : 0; // - - - content\n\n    tl.to(contentRef.current, {\n      duration: mouseIsOver ? 0.6 : 0.2,\n      ease: 'power3.out',\n      y: mouseIsOver ? 0 : 30,\n      opacity: mouseIsOver ? 1 : 0\n    }, delay);\n    tl.play();\n  }, [mouseIsOver, noneOpen]);\n  const titleLines = title.split('\\n'); //const lineHeight = 22\n\n  return /*#__PURE__*/_jsxs(\"div\", {\n    ref: ref,\n    className: cn(styles.strip),\n    style: {\n      backgroundColor: color\n    },\n    children: [/*#__PURE__*/_jsx(\"div\", {\n      ref: titleContainerRef,\n      className: cn(styles.title),\n      children: titleLines.map((line, i) => /*#__PURE__*/_jsx(\"span\", {\n        className: cn(styles.titleLine),\n        children: line\n      }, i))\n    }), /*#__PURE__*/_jsx(\"div\", {\n      ref: contentRef,\n      className: cn(styles.content),\n      children: /*#__PURE__*/_jsx(\"p\", {\n        children: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quis vestibulum maecenas aliquam magnis. Ultrices quis venenatis, ultricies tempus commodo commodo ultricies tellus lectus. Fringilla eu duis vel elementum turpis elementum ultricies senectus. Scelerisque ut vel in convallis id aliquet urna. Nibh commodo vel id elementum eu ultrices. Convallis aliquet quis egestas sit integer quam. A, auctor duis et aliquet tellus leo sodales purus. Ut consectetur dignissim commodo sagittis. Aliquam suspendisse sapien, ultricies iaculis. Leo odio pellentesque convallis ullamcorper felis elit. Quam aliquet leo fringilla aliquet convallis dolor, dolor enim, posuere. Dolor non eu sed tincidunt non eu at massa dictumst. Volutpat sed pellentesque massa facilisi sed nam tristique et ridiculus. Luctus tristique lacus, eu nam lobortis. Vel scelerisque.\"\n      })\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      ref: discoverRef,\n      className: cn(styles.discover),\n      children: [/*#__PURE__*/_jsx(\"span\", {\n        children: \"d\\xE9couvrir l'\\xE9cosystem\"\n      }), /*#__PURE__*/_jsx(\"div\", {\n        ref: discoverArrowRef,\n        className: cn(styles.arrowDown)\n      })]\n    })]\n  }, color);\n});\nexport default Strip;","map":null,"metadata":{},"sourceType":"module"}