function MainComponent() { const audioRef = React.useRef(null); const [isPlaying, setIsPlaying] = React.useState(false); const [timer, setTimer] = React.useState(1500); const [intervalId, setIntervalId] = React.useState(null); const startTimer = (e)=>{ e.preventDefault(); if (isPlaying) return; setIsPlaying(true); const id = setInterval(()=>{ setTimer((prevTimer)=>{ if (prevTimer > 0) return prevTimer - 1; clearInterval(id); setIsPlaying(false); audioRef.current.play(); return 1500; }); }, 1000); setIntervalId(id); }; const stopTimer = ()=>{ if (!isPlaying) return; clearInterval(intervalId); setIsPlaying(false); setTimer(1500); }; const formatTime = (time)=>{ const minutes = Math.floor(time / 60); let seconds = time % 60; seconds = seconds < 10 ? `0${seconds}` : seconds; return `${minutes}:${seconds}`; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-xl rounded-lg p-8 m-4 w-full max-w-md", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#121212] text-2xl mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Pomodoro Timer 🍅"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "musicFile", className: "block text-[#121212] font-roboto mb-2", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Music File:"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "musicFile", name: "musicFile", accept: "audio/*", className: "block w-full text-[#121212] border rounded py-2 px-3 shadow outline-none mb-3", onChange: (e)=>{ const file = e.target.files[0]; if (file) { const url = URL.createObjectURL(file); audioRef.current.src = url; } }, __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 bg-[#4caf50] text-white font-roboto rounded hover:bg-[#66bb6a] transition-colors", onClick: startTimer, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, "Start"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full py-2 px-4 bg-[#f44336] text-white font-roboto ml-2 rounded hover:bg-[#ef5350] transition-colors", onClick: stopTimer, __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Stop")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 font-roboto text-2xl text-[#121212]", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, formatTime(timer))), /*#__PURE__*/ React.createElement("audio", { ref: audioRef, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }))); }