function GreenPlayButton({ onPlay, iconClass = "fas fa-play", buttonText = "Listen" }) { return /*#__PURE__*/ React.createElement("button", { className: "text-white bg-[#10B981] py-2 px-4 rounded-lg flex items-center", onClick: onPlay, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${iconClass} mr-2`, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), " ", buttonText); } function GreenPlayButtonStory() { const playSong = ()=>console.log("Playing song..."); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GreenPlayButton, { onPlay: playSong, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this })); } function DynamicMusicPlayer({ isPlaying, currentTrack, songDetails, setIsPlaying, previousSong, nextSong }) { return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-80 flex justify-center items-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A202C] py-6 px-4 rounded-lg w-full max-w-sm border-[#2D3748] border-2 shadow-lg", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: songDetails[currentTrack].coverArt, alt: `Cover art for ${songDetails[currentTrack].title}`, className: "w-28 h-28 mx-auto rounded-full object-cover border-4 border-white shadow-md", style: { animation: `${isPlaying ? "spin 15s linear infinite" : "none"}` }, __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#E2E8F0] font-semibold text-md", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, songDetails[currentTrack].title), /*#__PURE__*/ React.createElement("p", { className: "text-[#A0AEC0]", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, songDetails[currentTrack].artist)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-5 mt-5", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-step-backward text-[#E2E8F0] cursor-pointer text-lg", onClick: previousSong, __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: `fas ${isPlaying ? 'fa-pause-circle' : 'fa-play-circle'} cursor-pointer text-3xl text-[#E2E8F0]`, onClick: ()=>setIsPlaying(!isPlaying), __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-step-forward text-[#E2E8F0] cursor-pointer text-lg", onClick: nextSong, __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "range", className: "w-full mt-4", name: "trackSeek", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-3", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-down text-[#E2E8F0]", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "range", className: "w-[80%]", name: "volume", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up text-[#E2E8F0]", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, ` @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } `))); } function DynamicMusicPlayerStory() { const songDetails = [ { title: "Vibrant Nights", artist: "DJ Mix", coverArt: "/images/song4.jpg" }, { title: "Soothing Waves", artist: "Relaxation Ensemble", coverArt: "/images/song5.jpg" }, { title: "Epic Journey", artist: "Orchestra Symphonica", coverArt: "/images/song6.jpg" } ]; const [isPlaying, setIsPlaying] = React.useState(false); const [currentTrack, setCurrentTrack] = React.useState(0); const nextSong = ()=>setCurrentTrack((prev)=>(prev + 1) % songDetails.length); const previousSong = ()=>setCurrentTrack((prev)=>(prev - 1 + songDetails.length) % songDetails.length); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(DynamicMusicPlayer, { isPlaying: isPlaying, currentTrack: currentTrack, songDetails: songDetails, setIsPlaying: setIsPlaying, previousSong: previousSong, nextSong: nextSong, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this })); } function MainComponent() { const [isPlaying, setIsPlaying] = React.useState(false); const [currentTrack, setCurrentTrack] = React.useState(0); const [searchTerm, setSearchTerm] = React.useState(''); const songDetails = [ { title: "Jerusalema", artist: "Master KG ft. Nomcebo", genre: "Afrobeat", releaseDate: "2019", duration: "5:42", coverArt: "/images/afrobeat-1.png" }, { title: "Fall", artist: "Davido", genre: "Afrobeat", releaseDate: "2017", duration: "4:18", coverArt: "/images/afrobeat-2.png" }, { title: "Ye", artist: "Burna Boy", genre: "Afrobeat", releaseDate: "2018", duration: "3:54", coverArt: "/images/afrobeat-3.png" }, { title: "John Vuli Gate", artist: "Mapara A Jazz", genre: "Afrobeat", releaseDate: "2020", duration: "5:55", coverArt: "/images/afrobeat-4.png" }, { title: "If", artist: "Davido", genre: "Afrobeat", releaseDate: "2017", duration: "4:00", coverArt: "/images/afrobeat-5.png" } ]; const filteredSongs = songDetails.filter((song)=>song.title.toLowerCase().includes(searchTerm.toLowerCase()) || song.artist.toLowerCase().includes(searchTerm.toLowerCase())); const nextSong = ()=>{ setCurrentTrack((prev)=>prev === filteredSongs.length - 1 ? 0 : prev + 1); setIsPlaying(true); }; const previousSong = ()=>{ setCurrentTrack((prev)=>prev === 0 ? filteredSongs.length - 1 : prev - 1); setIsPlaying(true); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A202C] text-white py-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-xl", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Afroverse"), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "px-4", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "px-4", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "px-4", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Music"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "px-4", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "Artists")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", className: "p-2", placeholder: "Search songs or artists", name: "search", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 p-5", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, filteredSongs.map((song, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#1A202C] rounded-lg overflow-hidden shadow-lg p-4 flex flex-col w-full max-w-sm", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: song.coverArt, alt: `${song.title} cover`, className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-white mt-4", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-lobster text-xl", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, song.title), /*#__PURE__*/ React.createElement("p", { className: "text-[#FBBF24] mt-1", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, song.artist), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 mt-1", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, song.genre), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 mt-1", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, song.releaseDate), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 mt-1", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, song.duration)), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-between", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white bg-[#FBBF24] py-2 px-4 rounded-lg flex items-center", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-info-circle mr-2", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }), " Details"), /*#__PURE__*/ React.createElement(GreenPlayButton, { onPlay: ()=>{ setCurrentTrack(index); setIsPlaying(true); }, __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }))))), filteredSongs.length > 0 && /*#__PURE__*/ React.createElement(DynamicMusicPlayer, { isPlaying: isPlaying, currentTrack: currentTrack, songDetails: filteredSongs, previousSong: previousSong, nextSong: nextSong, setIsPlaying: setIsPlaying, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this })); }