function MainComponent() { const [searchResults, setSearchResults] = React.useState([]); const [searchQuery, setSearchQuery] = React.useState(''); const handleSearch = async (e)=>{ e.preventDefault(); const response = await fetch(`/integrations/google-search/search?q=${searchQuery}`); const data = await response.json(); if (data.status === 'success') { setSearchResults(data.items); } }; const handleTextToSpeech = async (text)=>{ const response = await fetch(`/integrations/text-to-speech/speech?text=${encodeURIComponent(text)}`, { method: 'GET' }); const audioUrl = URL.createObjectURL(await response.blob()); const audio = new Audio(audioUrl); audio.play(); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] min-h-screen text-white font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "px-6 py-4 flex items-center justify-between bg-[#1DB954]", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-music text-2xl", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Spotify Clone")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), className: "p-2 rounded-lg text-black", placeholder: "Search songs", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "fas fa-search text-xl", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-xl", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-user text-xl", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Trending in India"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, searchResults.length > 0 ? searchResults.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#282828] p-4 rounded-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", className: "block", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 48, columnNumber: 21 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 49, columnNumber: 21 }, __self: this }, item.displayLink)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTextToSpeech(item.title), className: "mt-2 p-1 rounded-lg bg-[#1DB954] text-black", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, "Listen"))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "bg-[#282828] p-4 rounded-lg", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/image1.jpg", alt: "Trending song 1 in India", className: "w-full h-[150px] object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, "Song 1"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, "Artist 1")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#282828] p-4 rounded-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/image2.jpg", alt: "Trending song 2 in India", className: "w-full h-[150px] object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, "Song 2"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }, "Artist 2")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#282828] p-4 rounded-lg", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/image3.jpg", alt: "Trending song 3 in India", className: "w-full h-[150px] object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 67, columnNumber: 19 }, __self: this }, "Song 3"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }, "Artist 3")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#282828] p-4 rounded-lg", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/image4.jpg", alt: "Trending song 4 in India", className: "w-full h-[150px] object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 72, columnNumber: 19 }, __self: this }, "Song 4"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 73, columnNumber: 19 }, __self: this }, "Artist 4")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#282828] p-4 rounded-lg", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/image5.jpg", alt: "Trending song 5 in India", className: "w-full h-[150px] object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, "Song 5"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 78, columnNumber: 19 }, __self: this }, "Artist 5")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#282828] p-4 rounded-lg", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/image6.jpg", alt: "Trending song 6 in India", className: "w-full h-[150px] object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, "Song 6"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }, "Artist 6"))))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Made for You"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#282828] p-4 rounded-lg", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/made1.jpg", alt: "Made for you playlist 1 in India", className: "w-full h-[150px] object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, "Playlist 1"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, "Description 1")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#282828] p-4 rounded-lg", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/made2.jpg", alt: "Made for you playlist 2 in India", className: "w-full h-[150px] object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, "Playlist 2"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, "Description 2")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#282828] p-4 rounded-lg", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/made3.jpg", alt: "Made for you playlist 3 in India", className: "w-full h-[150px] object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "Playlist 3"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, "Description 3")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#282828] p-4 rounded-lg", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/made4.jpg", alt: "Made for you playlist 4 in India", className: "w-full h-[150px] object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "Playlist 4"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, "Description 4")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#282828] p-4 rounded-lg", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/made5.jpg", alt: "Made for you playlist 5 in India", className: "w-full h-[150px] object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, "Playlist 5"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, "Description 5")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#282828] p-4 rounded-lg", __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/made6.jpg", alt: "Made for you playlist 6 in India", className: "w-full h-[150px] object-cover rounded-lg mb-4", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this }, "Playlist 6"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, "Description 6"))))), /*#__PURE__*/ React.createElement("footer", { className: "px-6 py-4 bg-[#282828] flex items-center justify-between", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/path/to/playing.jpg", alt: "Currently playing song in India", className: "w-[60px] h-[60px] object-cover rounded-lg", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, "Current Song"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, "Current Artist"))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-backward text-xl", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-play text-xl", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-forward text-xl", __source: { fileName: "", lineNumber: 136, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-down text-xl", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "range", className: "w-[150px]", name: "volume", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up text-xl", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this })))); }