function MainComponent() { const [isPlaying, setIsPlaying] = React.useState(false); const handlePlayPauseClick = ()=>{ setIsPlaying(!isPlaying); }; const playPauseButton = isPlaying ? /*#__PURE__*/ React.createElement("button", { className: "bg-[#0d0d0d] rounded-full p-4 shadow-lg transform transition-all hover:scale-110", onClick: handlePlayPauseClick, __source: { fileName: "", lineNumber: 7, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-pause text-white text-2xl", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this })) : /*#__PURE__*/ React.createElement("button", { className: "bg-[#0d0d0d] rounded-full p-4 shadow-lg transform transition-all hover:scale-110", onClick: handlePlayPauseClick, __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-play text-white text-2xl", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); const skipButton = /*#__PURE__*/ React.createElement("button", { className: "bg-transparent text-white text-2xl transform transition-all hover:scale-125", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-forward", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this })); const backButton = /*#__PURE__*/ React.createElement("button", { className: "bg-transparent text-white text-2xl transform transition-all hover:scale-125", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-backward", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this })); const volumeControl = /*#__PURE__*/ React.createElement("input", { type: "range", name: "volume", className: "w-full h-2 bg-[#444444] rounded-full cursor-pointer appearance-none", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }); const audioRef = React.useRef(null); const songProgress = /*#__PURE__*/ React.createElement("input", { type: "range", name: "song-progress", className: "w-full h-2 bg-[#444444] rounded-full cursor-pointer appearance-none", onChange: (e)=>{ const value = e.target.value; audioRef.current.currentTime = audioRef.current.duration / 100 * value; }, __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }); const audioElement = /*#__PURE__*/ React.createElement("audio", { ref: audioRef, src: "/song.mp3", onEnded: ()=>setIsPlaying(false), __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#0d0d0d] font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center w-full max-w-2xl p-8 mx-auto", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl text-white mb-4 tracking-widest animate-pulse", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Now Playing"), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#CCCCCC] mb-6", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Artist - Song Title"), /*#__PURE__*/ React.createElement("div", { className: "w-full mb-6", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, songProgress, isPlaying && audioElement), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center w-full mb-8", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, backButton, playPauseButton, skipButton), /*#__PURE__*/ React.createElement("div", { className: "flex items-center w-full", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-volume-down text-white text-2xl mr-4", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, volumeControl), /*#__PURE__*/ React.createElement("i", { className: "fa fa-volume-up text-white text-2xl ml-4", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } `)); }