"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[33840],{33840:(n,e,s)=>{s.r(e),s.d(e,{default:()=>a});var t=s(67841),o=s(89207);let a=()=>(0,t.jsx)(o.default,{title:"Checkbox Demo",layout:"split",size:"wide",splitRatio:.6,minPreviewHeight:"12rem",dependencies:{"use-sound":"4.0.3"},files:{"/App.js":"\nimport React from 'react';\nimport useSound from 'use-sound';\n\nimport styles from './DrumMachineDemo.module.css';\n\nfunction DrumMachineDemo() {\n  const soundUrl = '/sounds/909-drums.mp3';\n\n  const [play] = useSound(soundUrl, {\n    sprite: {\n      kick: [0, 350],\n      hihat: [374, 160],\n      snare: [666, 290],\n      cowbell: [968, 200],\n    }\n  });\n\n  // Assign each drum sound to a key.\n  // NOTE: You need to click/focus something inside the\n  // preview pane for this to work.\n  useKeyboardBindings({\n    1: () => play({ id: 'kick' }),\n    2: () => play({ id: 'hihat' }),\n    3: () => play({ id: 'snare' }),\n    4: () => play({ id: 'cowbell' }),\n  })\n\n  return (\n    <div className={styles.wrapper}>\n      <button\n        aria-label=\"kick\"\n        className={styles.btn}\n        onMouseDown={() => play({ id: 'kick' })}\n      >\n        1\n      </button>\n      <button\n        aria-label=\"hihat\"\n        className={styles.btn}\n        onMouseDown={() => play({ id: 'hihat' })}\n      >\n        2\n      </button>\n      <button\n        aria-label=\"snare\"\n        className={styles.btn}\n        onMouseDown={() => play({ id: 'snare' })}\n      >\n        3\n      </button>\n      <button\n        aria-label=\"cowbell\"\n        className={styles.btn}\n        onMouseDown={() => play({ id: 'cowbell' })}\n      >\n        4\n      </button>\n    </div>\n  );\n}\n\nconst useKeyboardBindings = (map) => {\n  React.useEffect(() => {\n    const handlePress = (ev) => {\n      const handler = map[ev.key];\n\n      if (typeof handler === 'function') {\n        handler();\n      }\n    };\n\n    window.addEventListener('keydown', handlePress);\n\n    return () => {\n      window.removeEventListener('keydown', handlePress);\n    };\n  }, [map]);\n};\n\nexport default DrumMachineDemo;\n        ","/DrumMachineDemo.module.css":{hidden:!0,code:"\n.wrapper {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n}\n\n.btn {\n  --size: 3rem;\n  width: var(--size);\n  height: var(--size);\n  border: none;\n  border-radius: 4px;\n  color: white;\n  background: hsl(210deg 15% 6%);\n  font-weight: bold;\n  transform-origin: center center;\n  transition: transform 300ms;\n}\n.btn:active {\n  background: hsl(240deg 95% 62%);\n  transform: scale(0.9);\n  transition: transform 0ms;\n}\n          "}}})}}]);
//# sourceMappingURL=33840.a20765b9b782521c.js.map