function MainComponent() { const [isPlaying, setIsPlaying] = React.useState(false); const [currentSong, setCurrentSong] = React.useState({ title: 'Song Title', artist: 'Artist Name', albumCover: '/album-cover.jpg' }); const togglePlay = ()=>{ setIsPlaying(!isPlaying); }; const songCover = /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center w-full", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: currentSong.albumCover, alt: `Album cover for ${currentSong.title} by ${currentSong.artist}`, className: "w-48 h-48 object-cover rounded-md shadow-lg", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); const songInfo = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center mt-4", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-semibold text-[#ffffff] font-roboto truncate", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, currentSong.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-normal text-[#aaaaaa] font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, currentSong.artist)); const playerControls = /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 right-0 p-4 bg-[#181818] flex justify-between items-center", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-[#aaaaaa] hover:text-[#ffffff] transition-colors", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-step-backward text-3xl", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: togglePlay, className: "text-white bg-[#1DB954] w-16 h-16 rounded-full flex justify-center items-center mx-4", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: isPlaying ? "fas fa-pause text-3xl" : "fas fa-play text-3xl", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-[#aaaaaa] hover:text-[#ffffff] transition-colors", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-step-forward text-3xl", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }))); const volumeControl = /*#__PURE__*/ React.createElement("div", { className: "mt-4 px-4 flex items-center", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-down text-[#aaaaaa] text-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "100", name: "volume", className: "mx-2 w-full", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up text-[#aaaaaa] text-lg", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this })); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full justify-between bg-[#121212]", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, songCover, songInfo, volumeControl, playerControls, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, ` body { margin: 0; overflow: hidden; font-family: 'Roboto', sans-serif; } @media (min-width: 640px) { body { overflow: auto; } } `)); }