function MainComponent() { const [isPlaying, setIsPlaying] = React.useState(false); const [currentTime, setCurrentTime] = React.useState(0); const [duration, setDuration] = React.useState(210); const togglePlay = ()=>{ setIsPlaying(!isPlaying); }; const formatTime = (time)=>{ const minutes = Math.floor(time / 60); const seconds = `0${Math.floor(time - minutes * 60)}`.slice(-2); return `${minutes}:${seconds}`; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-5 bg-gray-800 h-screen", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-700 p-5 rounded-lg shadow-md flex flex-col items-center", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./album-cover.jpg", alt: "Dynamic album cover showing the current song", className: "w-[300px] h-[300px] rounded-full", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-white font-roboto text-lg mb-2", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "Dynamic Song Name"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Dynamic Artist Name"), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-600 rounded-full h-1.5 my-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-1.5 rounded-full", style: { width: `${currentTime / duration * 100}%` }, __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full text-gray-400", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, formatTime(currentTime)), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, formatTime(duration))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mt-3", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white text-2xl mx-2", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-step-backward", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: togglePlay, className: "text-white text-3xl mx-2", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${isPlaying ? 'fa-pause-circle' : 'fa-play-circle'}`, __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-white text-2xl mx-2", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-step-forward", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }))))); }