function MainComponent() { const [currentSong, setCurrentSong] = React.useState({ title: 'Loading...', artist: '...' }); const [recentlyPlayed, setRecentlyPlayed] = React.useState([]); const [volume, setVolume] = React.useState(50); React.useEffect(()=>{ const fetchCurrentSong = async ()=>{ const song = await new Promise((resolve)=>setTimeout(()=>resolve({ title: 'Song Title', artist: 'Artist Name' }), 1000)); setCurrentSong(song); }; const fetchRecentlyPlayed = async ()=>{ const songs = await new Promise((resolve)=>setTimeout(()=>resolve([ { title: 'Previous Song 1', artist: 'Artist 1', playCount: 37, albumArt: '/images/album1.png' }, { title: 'Previous Song 2', artist: 'Artist 2', playCount: 12, albumArt: '/images/album2.png' }, { title: 'Previous Song 3', artist: 'Artist 3', playCount: 9, albumArt: '/images/album3.png' } ]), 800)); setRecentlyPlayed(songs); }; fetchCurrentSong(); fetchRecentlyPlayed(); const interval = setInterval(fetchCurrentSong, 5000); return ()=>clearInterval(interval); }, []); const handleVolumeChange = (e)=>{ setVolume(e.target.value); }; const recentlyPlayedItems = recentlyPlayed.map((song, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between items-center bg-[#f0f0f0] p-2 mb-2 rounded", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: song.albumArt, alt: `Album art for ${song.title}`, className: "w-12 h-12 mr-4 rounded", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-[#333]", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, song.title), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#666]", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, song.artist)), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-[#888] mr-2", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, `${song.playCount} plays`), /*#__PURE__*/ React.createElement("button", { className: "text-[#888] hover:text-[#555]", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }))); const playerControlClasses = "text-4xl text-blue-600 cursor-pointer hover:text-blue-700 lg:text-3xl md:text-2xl sm:text-xl"; const volumeInputClasses = "range range-primary lg:w-24 md:w-20 sm:w-16"; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#1a1a1a] p-4 lg:p-8 font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mx-auto bg-[#282828] rounded-lg shadow-lg p-4 lg:p-6 w-full lg:max-w-[800px]", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 lg:mb-8", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "player", className: "flex flex-col lg:flex-row justify-start items-center p-4 bg-[#181818] rounded-lg", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4 lg:mb-0", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/default-album-artwork.png", alt: "Current song album artwork", className: "w-16 h-16 mr-4 rounded opacity-90", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-lg text-white", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, currentSong.title), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#ccc]", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, currentSong.artist))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 lg:gap-4 ml-auto", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: playerControlClasses, "aria-label": "Play or pause", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play-circle", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "range", className: volumeInputClasses, "aria-label": "Volume", name: "volume", min: "0", max: "100", value: volume, onChange: handleVolumeChange, __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold text-xl text-white mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Recently Played"), recentlyPlayedItems))); }