function MainComponent() { const [isRunning, setIsRunning] = React.useState(false); const [tempo, setTempo] = React.useState(120); const [beatsPerMeasure, setBeatsPerMeasure] = React.useState(4); const [subdivision, setSubdivision] = React.useState(1); const [currentBeat, setCurrentBeat] = React.useState(1); const [timer, setTimer] = React.useState(0); const [isMuted, setIsMuted] = React.useState(false); const startStopMetronome = ()=>{ setIsRunning(!isRunning); if (!isRunning) { setTimer(0); } }; const resetMetronome = ()=>{ setIsRunning(false); setCurrentBeat(1); setTimer(0); }; const toggleMute = ()=>{ setIsMuted(!isMuted); }; React.useEffect(()=>{ let interval; if (isRunning) { interval = setInterval(()=>{ setCurrentBeat((prevBeat)=>{ const totalSubdivision = beatsPerMeasure * subdivision; return prevBeat < totalSubdivision ? prevBeat + 1 : 1; }); }, 60 / (tempo * subdivision) * 1000); const timerInterval = setInterval(()=>{ setTimer((t)=>t + 1); }, 1000); return ()=>{ clearInterval(interval); clearInterval(timerInterval); }; } return ()=>clearInterval(interval); }, [ isRunning, tempo, beatsPerMeasure, subdivision ]); const beatIndicator = (()=>{ const totalSubdivision = beatsPerMeasure * subdivision; return Array.from({ length: totalSubdivision }, (_, index)=>{ const isBeat = (index + 1) % subdivision === 0; const isFirstBeat = index === 0; return /*#__PURE__*/ React.createElement("div", { key: index, className: `h-8 w-8 rounded-full ${isFirstBeat ? 'w-8 bg-[#4d79ff]' : isBeat ? 'w-8 bg-[#ddd]' : 'w-2 bg-[#ddd]'} ${index + 1 === currentBeat && isRunning && !isMuted ? 'animate-beat' : ''}`, __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }); }); })(); const formattedTimer = new Date(timer * 1000).toISOString().substr(11, 8); const handleSubdivisionChange = (event)=>{ setSubdivision(Number(event.target.value)); setCurrentBeat(1); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0] p-4 md:p-8", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-roboto mb-4", name: "timer", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, "Time: ", formattedTimer), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-roboto mb-4", name: "currentBeat", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, "Beat: ", currentBeat), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-8 flex-wrap justify-center", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, beatIndicator), /*#__PURE__*/ React.createElement("div", { className: "mb-6 w-full max-w-xs mx-auto", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "subdivision", className: "block text-lg font-roboto mb-2", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Beat Subdivision"), /*#__PURE__*/ React.createElement("select", { id: "subdivision", name: "subdivision", className: "font-roboto p-2 bg-white border-2 border-gray-300 rounded w-full", value: subdivision, onChange: handleSubdivisionChange, __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "1", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "1"), /*#__PURE__*/ React.createElement("option", { value: "2", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "2"), /*#__PURE__*/ React.createElement("option", { value: "4", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, "4"), /*#__PURE__*/ React.createElement("option", { value: "8", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "8"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row w-full max-w-md items-center justify-center space-x-0 space-y-4 md:space-x-4 md:space-y-0 mx-auto mb-4", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "startStop", className: "font-roboto w-full md:w-1/2 p-3 bg-[#1db954] text-white rounded shadow-lg transition-all duration-300 ease-in-out hover:bg-[#1ed760]", onClick: startStopMetronome, __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, isRunning ? 'Stop' : 'Start'), /*#__PURE__*/ React.createElement("button", { name: "reset", className: "font-roboto w-full md:w-1/2 p-3 bg-[#ff4d4d] text-white rounded shadow-lg transition-all duration-300 ease-in-out hover:bg-[#ff6666]", onClick: resetMetronome, __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "Reset"), /*#__PURE__*/ React.createElement("button", { name: "mute", className: "font-roboto w-full md:w-1/2 p-3 bg-gray-600 text-white rounded shadow-lg transition-all duration-300 ease-in-out hover:bg-gray-400", onClick: toggleMute, __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, isMuted ? 'Unmute' : 'Mute')), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, ` @keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } } `)); }