function SocialLinks({ spotifyUrl, twitterUrl, instagramUrl }) { return /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4 p-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: spotifyUrl, target: "_blank", rel: "noopener noreferrer", className: "text-3xl text-green-500 hover:text-green-600", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-spotify", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: twitterUrl, target: "_blank", rel: "noopener noreferrer", className: "text-2xl text-gray-600 hover:text-gray-700", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: instagramUrl, target: "_blank", rel: "noopener noreferrer", className: "text-2xl text-gray-600 hover:text-gray-700", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }))); } function SocialLinksStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SocialLinks, { spotifyUrl: "https://spotify.com/user/example", twitterUrl: "https://twitter.com/example", instagramUrl: "https://instagram.com/example", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this })); } function SpotifyPlayer({ artistId = "2tLEj52Sc2ixOHRK0hEqrM" }) { const [selectedTrack, setSelectedTrack] = useState(null); const [tracks, setTracks] = useState([]); useEffect(()=>{ const loadTracks = async ()=>{ const response = await fetch("/api/spotify-tracks", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ artistId }) }); const data = await response.json(); setTracks(data.tracks); if (data.tracks.length > 0) { setSelectedTrack(data.tracks[0].id); } }; loadTracks(); }, [ artistId ]); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[550px] bg-[#121212] rounded-lg overflow-hidden shadow-lg", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, selectedTrack && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: `https://open.spotify.com/embed/track/${selectedTrack}`, width: "100%", height: "152", frameBorder: "0", allow: "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture", loading: "lazy", className: "w-full", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-h-[300px] overflow-y-auto", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, tracks.map((track, index)=>/*#__PURE__*/ React.createElement("button", { key: track.id, onClick: ()=>setSelectedTrack(track.id), className: `w-full p-4 flex items-center space-x-4 hover:bg-[#282828] transition-colors ${selectedTrack === track.id ? "bg-[#282828]" : ""}`, __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 w-6", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("img", { src: track.albumImage, alt: `Album art for ${track.name}`, className: "w-12 h-12 rounded", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 text-left", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, track.name), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, track.albumName)))))); } function SpotifyPlayerStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SpotifyPlayer, { __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedTrack, setSelectedTrack] = useState(null); const [tracks, setTracks] = useState([]); useEffect(()=>{ const loadTracks = async ()=>{ const response = await fetch("/integrations/web-scraping/post", { method: "POST", body: { url: "https://open.spotify.com/artist/2tLEj52Sc2ixOHRK0hEqrM", getText: true } }); const data = await response.text(); const parser = new DOMParser(); const doc = parser.parseFromString(data, "text/html"); const trackElements = doc.querySelectorAll('[data-testid="tracklist-row"]'); const tracksData = Array.from(trackElements).map((el, index)=>({ id: el.getAttribute("data-testid").split("-")[2], name: el.querySelector('[data-testid="tracklist-row-song-name"]')?.textContent, albumName: el.querySelector('[data-testid="tracklist-row-album-name"]')?.textContent, albumImage: el.querySelector("img")?.src })); setTracks(tracksData); if (tracksData.length > 0) { setSelectedTrack(tracksData[0].id); } }; loadTracks(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0a0a0a] text-white font-montserrat", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-8", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center space-y-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl md:text-7xl font-bold bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Khushpreet Singh"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-400", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Artist | Producer | Creator")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] aspect-[3/4] md:aspect-[16/9] relative overflow-hidden rounded-2xl", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/23446e3a-71e7-4985-91cc-041a3432ecdd/-/format/auto/", alt: "Khushpreet Singh artistic portrait", className: "w-full h-full object-cover hover:scale-105 transition-transform duration-500", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px]", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-center", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Latest Tracks"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[550px] bg-[#121212] rounded-lg overflow-hidden shadow-lg", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, selectedTrack && /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 64, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: `https://open.spotify.com/embed/track/${selectedTrack}`, width: "100%", height: "152", frameBorder: "0", allow: "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture", loading: "lazy", className: "w-full", __source: { fileName: "", lineNumber: 65, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "max-h-[300px] overflow-y-auto", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, tracks.map((track, index)=>/*#__PURE__*/ React.createElement("button", { key: track.id, onClick: ()=>setSelectedTrack(track.id), className: `w-full p-4 flex items-center space-x-4 hover:bg-[#282828] transition-colors ${selectedTrack === track.id ? "bg-[#282828]" : ""}`, __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 w-6", __source: { fileName: "", lineNumber: 85, columnNumber: 23 }, __self: this }, index + 1), /*#__PURE__*/ React.createElement("img", { src: track.albumImage, alt: `Album art for ${track.name}`, className: "w-12 h-12 rounded", __source: { fileName: "", lineNumber: 86, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 text-left", __source: { fileName: "", lineNumber: 91, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white font-medium", __source: { fileName: "", lineNumber: 92, columnNumber: 25 }, __self: this }, track.name), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 95, columnNumber: 25 }, __self: this }, track.albumName)))))))), /*#__PURE__*/ React.createElement("div", { className: "mt-12 py-8 border-t border-gray-800 w-full", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(SocialLinks, { spotifyUrl: "https://spotify.com/user/example", twitterUrl: "https://twitter.com/example", instagramUrl: "https://instagram.com/example", __source: { fileName: "", lineNumber: 108, columnNumber: 15 }, __self: this })))))); }