function MainComponent() { const urls = [ 'https://www.example.com', 'https://www.wikipedia.org', 'https://www.python.org' ]; const [data, setData] = React.useState([]); const [query, setQuery] = React.useState(''); const [searchResults, setSearchResults] = React.useState([]); React.useEffect(()=>{ async function fetchData() { const results = await Promise.all(urls.map(async (url)=>{ try { const response = await fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(url)}`); const jsonResponse = await response.json(); const html = jsonResponse.contents; const parser = new DOMParser(); const doc = parser.parseFromString(html, "text/html"); const title = doc.querySelector("title")?.textContent || ''; const body = Array.from(doc.querySelectorAll("p")).map((p)=>p.textContent).join(' ') || ''; return { url, title, body }; } catch (error) { console.log(`Error crawling ${url}: ${error}`); return null; } })); setData(results.filter(Boolean)); } fetchData(); }, [ urls ]); const createIndex = (documents)=>{ const index = {}; documents.forEach((doc, i)=>{ const text = (doc.title + ' ' + doc.body).toLowerCase(); const words = text.match(/\b\w+\b/g) || []; words.forEach((word)=>{ if (!index[word]) index[word] = []; index[word].push(i); }); }); return index; }; const search = (query, index, documents)=>{ const queryWords = query.toLowerCase().split(/\s+/); const results = new Set(); queryWords.forEach((word)=>{ if (index[word]) { index[word].forEach((docId)=>{ results.add(documents[docId]); }); } }); return Array.from(results); }; React.useEffect(()=>{ if (data.length) { const index = createIndex(data); const results = search(query, index, data); setSearchResults(results); } }, [ data, query ]); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto text-center", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, "Web Crawler Search Results"), /*#__PURE__*/ React.createElement("a", { href: "https://m.youtube.com/?hl=ja", target: "_self", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "query", value: query, onChange: (e)=>setQuery(e.target.value), placeholder: "Search...", className: "mt-4 p-2 border border-gray-300 rounded w-full", __source: { fileName: "", lineNumber: 72, columnNumber: 61 }, __self: this })), /*#__PURE__*/ React.createElement("ul", { className: "mt-6", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, searchResults.map((result, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border border-gray-300 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, `Title: ${result.title}`), /*#__PURE__*/ React.createElement("a", { href: result.url, className: "text-blue-500", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, `URL: ${result.url}`), /*#__PURE__*/ React.createElement("p", { className: "mt-2 font-roboto", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, `Body: ${result.body}`)))))); }