function MainComponent() { const [menuOpen, setMenuOpen] = React.useState(false); const [currentPlayingAudio, setCurrentPlayingAudio] = React.useState(null); const toggleMenu = ()=>{ setMenuOpen(!menuOpen); }; const radioPrograms = [ { name: "Test", mp3: "./src/mp3/test.mp3" }, { name: "test 2", mp3: "./src/mp3/test2.mp3" }, { name: "test 3", mp3: "./src/mp3/test3.mp3" }, { name: "test 4", mp3: "./src/mp3/test4.mp3" }, { name: "test 5", mp3: "./src/mp3/test5.mp3" }, { name: "test 6", mp3: "./src/mp3/test6.mp3" }, { name: "test 7", mp3: "./src/mp3/test7.mp3" }, { name: "test 8", mp3: "./src/mp3/test8.mp3" }, { name: "test 9", mp3: "./src/mp3/test9.mp3" }, { name: "test 10", mp3: "./src/mp3/test10.mp3" } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] min-h-screen p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center pb-12 relative", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-4 cursor-pointer text-yellow-500", onClick: toggleMenu, __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-2xl", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("h2", { className: "font-crimson-text text-4xl text-yellow-500 mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Sound Effects")), menuOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 bg-[#1e1e1e] w-[300px] h-full shadow-lg p-6 z-50", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/src/home.html", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "path-to-your-logo.png", alt: "Logo", className: "w-[50px] h-auto mx-auto mb-6", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("ul", { className: "font-roboto text-yellow-500 space-y-4", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/src/list.html", __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }, "Category 1")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/src/list2.html", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, "Category 2")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/src/list3.html", __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, "Category 3")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/src/list4.html", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, "Category 4")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/src/list5.html", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "Category 5")))), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, radioPrograms.map((program, index)=>{ const audioRef = React.useRef(null); const progressBarRef = React.useRef(null); const timeDisplayRef = React.useRef(null); const handleClick = ()=>{ const audio = audioRef.current; if (currentPlayingAudio && currentPlayingAudio !== audio) { currentPlayingAudio.pause(); currentPlayingAudio.currentTime = 0; setCurrentPlayingAudio(null); } if (audio.paused) { audio.play(); setCurrentPlayingAudio(audio); } else { audio.pause(); setCurrentPlayingAudio(null); } }; const handleTimeUpdate = ()=>{ const audio = audioRef.current; const currentTime = audio?.currentTime; const duration = audio?.duration; if (progressBarRef.current && timeDisplayRef.current && duration) { progressBarRef.current.style.width = currentTime / duration * 100 + '%'; const minutes = Math.floor(currentTime / 60); const seconds = Math.floor(currentTime % 60).toString().padStart(2, '0'); timeDisplayRef.current.textContent = `${minutes}:${seconds}`; } }; return /*#__PURE__*/ React.createElement("div", { key: index, className: "program bg-[#1e1e1e] rounded-lg shadow-md p-6 text-yellow-500 flex flex-col items-center", onClick: handleClick, __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "title font-roboto text-xl mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, program.name), /*#__PURE__*/ React.createElement("div", { className: "controls flex items-center justify-between w-full", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "icon text-4xl", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${currentPlayingAudio === audioRef.current ? 'fa-pause' : 'fa-play'}`, __source: { fileName: "", lineNumber: 84, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "time text-sm", ref: timeDisplayRef, __source: { fileName: "", lineNumber: 86, columnNumber: 19 }, __self: this }, "00:00")), /*#__PURE__*/ React.createElement("div", { className: "progress-bar w-full h-[5px] bg-[#333] rounded mt-3 overflow-hidden", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-500 h-full w-0", ref: progressBarRef, __source: { fileName: "", lineNumber: 89, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("audio", { className: "audio hidden", ref: audioRef, onTimeUpdate: handleTimeUpdate, onEnded: ()=>setCurrentPlayingAudio(null), __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: program.mp3, type: "audio/mp3", __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }), "Your browser does not support the audio element.")); })))); }