function MainComponent() { const isAdmin = true; const userName = "User Name"; const userEmail = "user.email@example.com"; const profilePic = "relative/path/to/profile-pic.jpg"; const likedSongs = [ { title: "Song Title", artist: "Artist Name", albumArt: "relative/path/to/album-art.jpg" } ]; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#343A40]", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#004085] text-white h-[60px] flex items-center justify-between px-[20px]", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-2xl", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "SoundscapeOdyssey"), /*#__PURE__*/ React.createElement("nav", { className: "space-x-[15px]", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white text-xl", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Dashboard"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white text-xl", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Search"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white text-xl", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, "Liked Songs"), isAdmin && /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white text-xl", __source: { fileName: "", lineNumber: 18, columnNumber: 23 }, __self: this }, "Admin Panel")), /*#__PURE__*/ React.createElement("button", { className: "bg-[#007BFF] text-white rounded-[4px] px-[20px] py-[10px] hover:bg-[#004085]", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Logout")), /*#__PURE__*/ React.createElement("main", { className: "bg-[#FFFFFF] m-[20px] p-[20px] rounded-[4px] shadow-[0_2px_4px_rgba(0,0,0,0.1)]", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: profilePic, alt: "User's profile picture", className: "w-[100px] h-[100px] rounded-full", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-[20px]", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-[#343A40] text-[1.75rem] font-bold", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, userName), /*#__PURE__*/ React.createElement("p", { className: "text-[#6C757D] text-[1rem]", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, userEmail))), /*#__PURE__*/ React.createElement("div", { className: "mt-[20px]", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-[#343A40] text-[1.5rem] font-bold", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Liked Songs"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-[10px] mt-[10px]", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, likedSongs.map((song, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between p-[10px] border rounded-[4px] border-[#6C757D]", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: song.albumArt, alt: `Album art for ${song.title}`, className: "w-[50px] h-[50px] mr-[10px]", __source: { fileName: "", lineNumber: 40, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#343A40] text-[1rem] font-bold", __source: { fileName: "", lineNumber: 42, columnNumber: 21 }, __self: this }, song.title), /*#__PURE__*/ React.createElement("p", { className: "text-[#6C757D] text-[1rem]", __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this }, song.artist))), /*#__PURE__*/ React.createElement("button", { className: "text-[#007BFF] hover:text-[#004085]", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash-alt", __source: { fileName: "", lineNumber: 46, columnNumber: 73 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "mt-[20px] flex justify-end space-x-[10px]", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#007BFF] text-white rounded-[4px] px-[20px] py-[10px] hover:bg-[#004085]", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Search Songs"), isAdmin && /*#__PURE__*/ React.createElement("button", { className: "bg-[#6CB2FF] text-white rounded-[4px] px-[20px] py-[10px] hover:bg-[#007BFF]", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Admin Panel"))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#004085] text-white h-[40px] flex items-center justify-between px-[20px] py-[10px]", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white text-[0.875rem]", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Sitemap"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white text-[0.875rem]", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Terms of Service"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white text-[0.875rem]", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Privacy Policy"))); }