function MainComponent() { const [tab, setTab] = React.useState('home'); const [isPlaying, setIsPlaying] = React.useState(false); const songsMostPlayed = [ { title: 'Song One', artist: 'Artist A', imageUrl: './images/song1.jpg' }, { title: 'Song Two', artist: 'Artist B', imageUrl: './images/song2.jpg' } ]; const songsNewReleases = [ { title: 'Song Three', artist: 'Artist C', imageUrl: './images/song3.jpg' }, { title: 'Song Four', artist: 'Artist D', imageUrl: './images/song4.jpg' }, { title: 'Song Five', artist: 'Artist E', imageUrl: './images/song5.jpg' }, { title: 'Song Six', artist: 'Artist F', imageUrl: './images/song6.jpg' } ]; const renderContent = ()=>{ switch(tab){ case 'home': return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mt-4 mx-4", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-xl text-[#121212]", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, "Most Played"), /*#__PURE__*/ React.createElement("div", { className: "flex overflow-auto mt-4 space-x-4", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, songsMostPlayed.map((song, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[160px] flex flex-col items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: song.imageUrl, alt: `Album art for ${song.title}`, className: "w-[140px] h-[140px] rounded-lg", __source: { fileName: "", lineNumber: 27, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto mt-2 text-sm text-[#121212]", __source: { fileName: "", lineNumber: 28, columnNumber: 21 }, __self: this }, song.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xs text-gray-500", __source: { fileName: "", lineNumber: 29, columnNumber: 21 }, __self: this }, song.artist)))), /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-xl text-[#121212] mt-8", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, "New Releases"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 mt-4", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }, songsNewReleases.map((song, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: song.imageUrl, alt: `Album art for ${song.title}`, className: "w-[140px] h-[140px] rounded-lg", __source: { fileName: "", lineNumber: 37, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto mt-2 text-sm text-[#121212]", __source: { fileName: "", lineNumber: 38, columnNumber: 21 }, __self: this }, song.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-xs text-gray-500", __source: { fileName: "", lineNumber: 39, columnNumber: 21 }, __self: this }, song.artist)))))); case 'search': return /*#__PURE__*/ React.createElement("div", { className: "flex mt-4 mx-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[60px] bg-[#F3F4F6] flex items-center px-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search text-gray-400", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search music...", className: "ml-2 bg-transparent outline-none w-full", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }))); case 'settings': return /*#__PURE__*/ React.createElement("div", { className: "mx-4 mt-4", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-xl text-[#121212]", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Settings")); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, renderContent()), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[80px] bg-white border-t-2 border-gray-200 flex items-center justify-between px-4", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[60px] h-[60px] bg-gray-300 rounded-full", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "Now playing"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Artist name"))), /*#__PURE__*/ React.createElement("button", { className: "w-[50px] h-[50px] bg-blue-500 rounded-full flex items-center justify-center text-white", onClick: ()=>setTab(tab !== 'fullscreen' ? 'fullscreen' : 'home'), __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-expand", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: `w-[50px] h-[50px] rounded-full flex items-center justify-center ${isPlaying ? 'bg-red-500' : 'bg-green-500'}`, onClick: ()=>setIsPlaying(!isPlaying), __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${isPlaying ? 'fa-pause' : 'fa-play'}`, __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-100 p-2 flex justify-around", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTab('home'), className: "font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTab('search'), className: "font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, "Search"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTab('settings'), className: "font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, "Settings"))); }