function MainComponent() { const [isPlaying, setIsPlaying] = React.useState(false); const togglePlay = ()=>{ setIsPlaying(!isPlaying); }; const playPauseIcon = isPlaying ? 'fa-pause' : 'fa-play'; const volumeIcon = isPlaying ? 'fa-volume-up' : 'fa-volume-mute'; const playPauseTooltip = isPlaying ? 'Pause' : 'Play'; const animatedVolumeStyle = isPlaying ? 'transform: rotate(0deg)' : ''; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-52 h-52 rounded-full shadow-lg", src: "/album-artwork.png", alt: "Spinning album artwork", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-2xl text-[#FFFFFF]", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Track Title"), /*#__PURE__*/ React.createElement("h4", { className: "font-roboto text-xl text-[#BBBBBB]", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Artist Name")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-3xl text-[#FFFFFF] hover:text-[#BBBBBB] focus:outline-none relative", onClick: togglePlay, __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${playPauseIcon}`, __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "absolute bottom-full mb-2 px-2 py-1 text-xs text-[#FFFFFF] bg-[#000000] rounded-md", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, playPauseTooltip)), /*#__PURE__*/ React.createElement("button", { className: "text-3xl text-[#FFFFFF] hover:text-[#BBBBBB] focus:outline-none", style: { animation: isPlaying ? 'volumeRotate 2s linear infinite' : undefined }, __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${volumeIcon}`, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md px-4 my-2", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "range", className: "w-full", name: "track-progress", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md px-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "range", className: "w-full", name: "volume-control", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, ` @keyframes rotate { to { transform: rotate(360deg); } } @keyframes volumeRotate { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(15deg); } 75% { transform: rotate(-15deg); } } `), /*#__PURE__*/ React.createElement("style", { jsx: true, __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, ` img { ${isPlaying ? 'animation: rotate 8s linear infinite;' : ''} } `)); }