function MainComponent() { const [videosData, setVideosData] = React.useState([]); const handleSubmit = async (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const keywords = formData.get('keywords'); const response = await fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url: `https://www.youtube.com/results?search_query=${encodeURIComponent(keywords)}`, return_text: false }), headers: { 'Content-Type': 'application/json' } }); if (!response.ok) { return; } const html = await response.text(); const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); const videos = Array.from(doc.querySelectorAll('ytd-video-renderer')).map((video)=>{ const titleElement = video.querySelector('#video-title'); const viewsElement = video.querySelector('#metadata-line > span:first-child'); const channelElement = video.querySelector('.ytd-channel-name'); const subscribersElement = video.querySelector('yt-formatted-string#owner-sub-count'); const title = titleElement ? titleElement.textContent.trim() : ''; const views = viewsElement ? viewsElement.textContent.trim() : ''; const channel = channelElement ? channelElement.textContent.trim() : ''; const subscribers = subscribersElement ? subscribersElement.textContent.trim() : ''; return { title, views, channel, subscribers }; }); setVideosData(videos); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen flex flex-col items-center justify-center bg-[#fafafa] p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-full max-w-xl", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "keywords", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Enter Keywords for YouTube Search:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "keywords", id: "keywords", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", placeholder: "e.g., web development", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Search"))), /*#__PURE__*/ React.createElement("div", { id: "results", className: "space-y-4", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, videosData.map((video, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col p-3 bg-gray-100 rounded-lg", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, video.title), /*#__PURE__*/ React.createElement("p", { className: "text-gray-800", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, video.channel, " - ", video.subscribers), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, video.views)))))); }