function MainComponent() { const [bpm, setBpm] = React.useState(120); const [isPlaying, setIsPlaying] = React.useState(false); const [beatCount, setBeatCount] = React.useState(0); const intervalRef = React.useRef(null); const audioContextRef = React.useRef(null); React.useEffect(()=>{ if (typeof window !== 'undefined') { audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)(); } }, []); const playClick = React.useCallback(()=>{ if (!audioContextRef.current) return; const oscillator = audioContextRef.current.createOscillator(); const gainNode = audioContextRef.current.createGain(); oscillator.connect(gainNode); gainNode.connect(audioContextRef.current.destination); oscillator.frequency.setValueAtTime(800, audioContextRef.current.currentTime); gainNode.gain.setValueAtTime(0.1, audioContextRef.current.currentTime); gainNode.gain.exponentialRampToValueAtTime(0.01, audioContextRef.current.currentTime + 0.1); oscillator.start(audioContextRef.current.currentTime); oscillator.stop(audioContextRef.current.currentTime + 0.1); }, []); const startMetronome = React.useCallback(()=>{ if (intervalRef.current) return; const interval = 60000 / bpm; playClick(); setBeatCount(1); intervalRef.current = setInterval(()=>{ playClick(); setBeatCount((prev)=>prev % 4 + 1); }, interval); setIsPlaying(true); }, [ bpm, playClick ]); const stopMetronome = React.useCallback(()=>{ if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null; } setIsPlaying(false); setBeatCount(0); }, []); const toggleMetronome = React.useCallback(()=>{ if (isPlaying) { stopMetronome(); } else { startMetronome(); } }, [ isPlaying, startMetronome, stopMetronome ]); React.useEffect(()=>{ if (isPlaying) { stopMetronome(); startMetronome(); } }, [ bpm ]); React.useEffect(()=>{ return ()=>{ if (intervalRef.current) { clearInterval(intervalRef.current); } }; }, []); const beatIndicatorClass = `w-4 h-4 rounded-full transition-all duration-150 ${beatCount > 0 ? 'bg-blue-500 scale-110' : 'bg-gray-300'}`; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 flex items-center justify-center p-4 font-sf-pro", __source: { fileName: "", lineNumber: 84, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-3xl shadow-lg p-8 w-full max-w-md mx-auto", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-gray-900 mb-2", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Metronome"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-2 mb-4", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, [ 1, 2, 3, 4 ].map((beat)=>/*#__PURE__*/ React.createElement("div", { key: beat, className: `w-3 h-3 rounded-full transition-all duration-150 ${beatCount === beat ? 'bg-blue-500 scale-125' : 'bg-gray-300'}`, __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-6xl font-light text-gray-900 mb-2 tabular-nums", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, bpm), /*#__PURE__*/ React.createElement("div", { className: "text-lg text-gray-500 font-medium", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "BPM")), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "range", min: "40", max: "200", value: bpm, onChange: (e)=>setBpm(parseInt(e.target.value)), className: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between text-sm text-gray-500 mt-2", __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, "40"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }, "200"))), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleMetronome, className: `w-20 h-20 rounded-full text-white font-semibold text-lg transition-all duration-200 transform active:scale-95 shadow-lg ${isPlaying ? 'bg-red-500 hover:bg-red-600' : 'bg-blue-500 hover:bg-blue-600'}`, __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, isPlaying ? 'Stop' : 'Start'))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 136, columnNumber: 7 }, __self: this }, ` .slider::-webkit-slider-thumb { appearance: none; height: 24px; width: 24px; border-radius: 50%; background: #3b82f6; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; } .slider::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .slider::-moz-range-thumb { height: 24px; width: 24px; border-radius: 50%; background: #3b82f6; cursor: pointer; border: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: all 0.2s ease; } .slider::-moz-range-thumb:hover { transform: scale(1.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } `)); }