function MainComponent() { const [playlist, setPlaylist] = React.useState([]); const [currentSongIndex, setCurrentSongIndex] = React.useState(0); const [searchTerm, setSearchTerm] = React.useState(""); const [suggestions, setSuggestions] = React.useState([]); const [isPlaying, setIsPlaying] = React.useState(false); const shufflePlaylist = ()=>{ let shuffledPlaylist = [ ...playlist ].sort(()=>Math.random() - 0.5); setPlaylist(shuffledPlaylist); setCurrentSongIndex(0); }; const togglePlayPause = ()=>{ setIsPlaying(!isPlaying); }; const playNextSong = ()=>{ setCurrentSongIndex((prevIndex)=>(prevIndex + 1) % playlist.length); }; const playPreviousSong = ()=>{ setCurrentSongIndex((prevIndex)=>(prevIndex - 1 + playlist.length) % playlist.length); }; const playRandomSong = ()=>{ const randomIndex = Math.floor(Math.random() * playlist.length); setCurrentSongIndex(randomIndex); }; const handleSearchChange = (event)=>{ const value = event.target.value; setSearchTerm(value); if (value) { const matchedSuggestions = getSuggestions(value, playlist); setSuggestions(matchedSuggestions); } else { setSuggestions([]); } }; const handleSearchSubmit = (event)=>{ event.preventDefault(); const matchedSongs = getSuggestions(searchTerm, playlist); setPlaylist(matchedSongs); }; const loadRandomRecommendations = ()=>{ // Function to load random recommendations. }; const getSuggestions = (searchTerm, playlist)=>{ return playlist.filter((song)=>song.title.toLowerCase().includes(searchTerm.toLowerCase())); }; const filteredPlaylist = searchTerm ? playlist.filter((song)=>song.title.toLowerCase().includes(searchTerm.toLowerCase())) : playlist; const currentSong = playlist.length > 0 ? playlist[currentSongIndex] : null; const playIconStyle = isPlaying ? { animation: 'spin 2s linear infinite' } : {}; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#121212] text-white", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full p-4 bg-[#1e1e1e] flex justify-between items-center", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-[#1db954]", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "MySpot"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearchSubmit, className: "flex", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: searchTerm, onChange: handleSearchChange, onFocus: loadRandomRecommendations, placeholder: "Search songs...", className: "rounded-l p-2 text-black w-full lg:w-auto", autoComplete: "off", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 bg-[#1db954] rounded-r text-white", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fas fa-search", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }))), suggestions.length > 0 && /*#__PURE__*/ React.createElement("ul", { className: "absolute bg-white text-black left-0 right-0 mt-1 rounded z-10", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, suggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("li", { key: suggestion.id, className: "p-2 hover:bg-[#1db954] hover:text-white cursor-pointer", onClick: ()=>{ setSearchTerm(suggestion.title); setSuggestions([]); setCurrentSongIndex(playlist.findIndex((song)=>song.id === suggestion.id)); setIsPlaying(true); }, __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this }, suggestion.title))))), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col space-y-4 items-center w-full p-4", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: playPreviousSong, className: "text-3xl", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fas fa-step-backward", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: togglePlayPause, className: "text-5xl", style: playIconStyle, __source: { fileName: "", lineNumber: 116, columnNumber: 13 }, __self: this }, isPlaying ? /*#__PURE__*/ React.createElement("span", { className: "fas fa-pause", __source: { fileName: "", lineNumber: 121, columnNumber: 28 }, __self: this }) : /*#__PURE__*/ React.createElement("span", { className: "fas fa-play", __source: { fileName: "", lineNumber: 121, columnNumber: 63 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: playNextSong, className: "text-3xl", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fas fa-step-forward", __source: { fileName: "", lineNumber: 124, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: shufflePlaylist, className: "text-xl px-4 py-2 bg-[#1db954] rounded ", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, "Shuffle")), /*#__PURE__*/ React.createElement("section", { className: "text-left w-full overflow-y-auto max-h-[400px]", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, filteredPlaylist.map((song, index)=>/*#__PURE__*/ React.createElement("div", { key: song.id, className: `flex items-center p-2 ${index === currentSongIndex ? 'bg-[#333333]' : 'hover:bg-[#282828]'} cursor-pointer`, onClick: ()=>{ setCurrentSongIndex(index); setIsPlaying(true); }, __source: { fileName: "", lineNumber: 134, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 bg-cover bg-center rounded mr-2", style: { backgroundImage: `url(${song.cover})` }, __source: { fileName: "", lineNumber: 142, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 143, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg", __source: { fileName: "", lineNumber: 144, columnNumber: 19 }, __self: this }, song.title), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#aaa]", __source: { fileName: "", lineNumber: 145, columnNumber: 19 }, __self: this }, song.artist))))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this }, ` @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } `)); }