function MainComponent() { const [hits, setHits] = React.useState([]); const [query, setQuery] = React.useState(''); const fetchSearchResults = async ()=>{ const searchResults = await fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url: `https://myalgoliadatabase.com/search?query=${query}` }), headers: { 'Content-Type': 'application/json' } }); searchResults.text().then((html)=>{ const parser = new DOMParser(); const doc = parser.parseFromString(html, 'text/html'); const hitsNodes = doc.querySelectorAll('.hit'); // Assuming '.hit' is a class of an HTML element containing the search result const extractedHits = [ ...hitsNodes ].map((node)=>({ objectID: node.getAttribute('data-objectid'), name: node.querySelector('.name').textContent, description: node.querySelector('.description').textContent })); setHits(extractedHits); }); }; React.useEffect(()=>{ if (query.length > 0) { fetchSearchResults(); } }, [ query ]); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex flex-col sm:flex-row justify-between items-center py-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Algolia Search"), /*#__PURE__*/ React.createElement("div", { className: "flex-grow mt-4 sm:mt-0 sm:ml-4 lg:w-[500px]", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "ais-SearchBox-input form-input border-2 border-gray-300 p-2 w-full", type: "search", placeholder: "Search for entries...", onChange: (event)=>setQuery(event.currentTarget.value), value: query, name: "search", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ais-Hits mt-4", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, hits.length > 0 ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, hits.map((hit)=>/*#__PURE__*/ React.createElement("div", { key: hit.objectID, className: "border-b border-gray-300 py-2", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 52, columnNumber: 21 }, __self: this }, hit.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-gray-600", __source: { fileName: "", lineNumber: 53, columnNumber: 21 }, __self: this }, hit.description)))) : /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-gray-600", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "No results found"))))); }