"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[64959],{64959:(n,o,e)=>{e.r(o),e.d(o,{default:()=>r});var s=e(67841),t=e(89207);let r=()=>(0,s.jsx)(t.default,{title:"Popping Arrows Demo",layout:"split",size:"wide",splitRatio:.6,minPreviewHeight:"10rem",dependencies:{"use-sound":"4.0.3"},files:{"/App.js":'\nimport React from \'react\';\nimport useSound from \'use-sound\';\n\nimport styles from \'./PopsDemo.module.css\';\n\nconst ARROW_DELAY = 125;\nconst SOUND_URL = \'/sounds/rising-pops.mp3\';\n\nfunction PopsDemo() {\n  const [isHovering, setIsHovering] = React.useState(false);\n  const [play, { stop }] = useSound(SOUND_URL, { volume: 0.5 });\n\n  return (\n    <button\n      className={styles.btn}\n      onMouseEnter={() => {\n        setIsHovering(true);\n        play();\n      }}\n      onMouseLeave={() => {\n        setIsHovering(false);\n        stop();\n      }}\n    >\n      Hover over me!\n      <svg\n        width="36"\n        height="12"\n        viewBox="0 0 36 12"\n        fill="none"\n        className={styles.arrowSvg}\n      >\n        <path\n          d="M0.75 6H11.25 M6 0.75L11.25 6L6 11.25"\n          stroke="var(--color-primary)"\n          strokeLinecap="round"\n          strokeLinejoin="round"\n          style={{\n            opacity: true ? 1 : 0,\n            transition: `opacity ${isHovering ? 0 : ARROW_DELAY}ms`,\n          }}\n        />\n\n        <path\n          d="M15 10L19.5 5.5L15 1"\n          stroke="var(--color-primary)"\n          strokeLinecap="round"\n          strokeLinejoin="round"\n          style={{\n            opacity: isHovering ? 1 : 0,\n            transition: `opacity ${isHovering ? 0 : ARROW_DELAY}ms`,\n          }}\n        />\n        <path\n          d="M23 10L27.5 5.5L23 1"\n          stroke="var(--color-primary)"\n          strokeOpacity="0.66"\n          strokeLinecap="round"\n          strokeLinejoin="round"\n          style={{\n            opacity: isHovering ? 1 : 0,\n            transition: `opacity ${\n              isHovering ? 0 : ARROW_DELAY\n            }ms ${ARROW_DELAY}ms`,\n          }}\n        />\n        <path\n          d="M31 10L35.5 5.5L31 1"\n          stroke="var(--color-primary)"\n          strokeOpacity="0.35"\n          strokeLinecap="round"\n          strokeLinejoin="round"\n          style={{\n            opacity: isHovering ? 1 : 0,\n            transition: `opacity ${\n              isHovering ? 0 : ARROW_DELAY\n            }ms ${ARROW_DELAY * 2}ms`,\n          }}\n        />\n      </svg>\n    </button>\n  );\n}\n\nexport default PopsDemo;\n        ',"/PopsDemo.module.css":{hidden:!0,code:"\n.btn {\n  --color-primary: hsl(240deg 95% 62%);\n\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  border: none;\n  padding: 0;\n  background: transparent;\n  color: black;\n  font-size: 1.125rem;\n  font-weight: 600;\n  white-space: nowrap;\n}\n.arrowSvg {\n  flex-shrink: 0;\n  transform: translateY(2px);\n}\n          "}}})}}]);
//# sourceMappingURL=64959.295b69164185f091.js.map