function MainComponent() { const [word, setWord] = React.useState(''); const [definitions, setDefinitions] = React.useState([]); const [isSearching, setIsSearching] = React.useState(false); const handleSearchInput = (event)=>{ setWord(event.target.value.trim().toLowerCase()); }; const searchForWord = async (event)=>{ if (event.key === 'Enter' && word) { setIsSearching(true); const scrapedData = await fetchFromDictionaries(word); setDefinitions(scrapedData); setIsSearching(false); } }; const fetchFromDictionaries = async (searchTerm)=>{ const urls = [ 'https://dictionary.cambridge.org/', 'https://www.collinsdictionary.com/', 'https://www.oxfordlearnersdictionaries.com/', 'https://www.merriam-webster.com/' ]; const responses = await Promise.all(urls.map((url)=>fetch('/integrations/web-scraping/post', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: `${url}search/english?q=${searchTerm}`, return_text: true }) }).then((response)=>response.json()))); return responses.flatMap((response)=>parseScrapedData(response)); }; const parseScrapedData = (response)=>{ const parser = new DOMParser(); const doc = parser.parseFromString(response, 'text/html'); const definitionsNodes = doc.querySelectorAll('.definition'); const exampleNodes = doc.querySelectorAll('.example'); const definitions = Array.from(definitionsNodes).map((def)=>({ definition: def.textContent.trim(), partOfSpeech: def.previousElementSibling?.textContent.trim(), examples: Array.from(exampleNodes).map((example)=>example.textContent.trim()) })); return definitions; }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto font-arial text-[#000000] bg-[#e0c8b0] container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white text-black flex flex-col items-center justify-center mb-8 rounded-lg shadow", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "ENGLISH DICTIONARY"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-xl", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", name: "searchWord", placeholder: "Type a word...", className: "p-4 w-full border-2 border-gray-300 rounded-md shadow appearance-none leading-loose bg-white text-black", onChange: handleSearchInput, onKeyPress: searchForWord, value: word, __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fa fa-search absolute right-3 top-[22px] text-black", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, isSearching && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", __source: { fileName: "", lineNumber: 70, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-book fa-spin text-lg", __source: { fileName: "", lineNumber: 70, columnNumber: 75 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "sr-only", __source: { fileName: "", lineNumber: 70, columnNumber: 122 }, __self: this }, "Loading...")), definitions.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4 bg-white p-4 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, definitions.map((def, index)=>/*#__PURE__*/ React.createElement("div", { key: index, __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, word.toUpperCase()), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 76, columnNumber: 23 }, __self: this }, "Part of speech:"), " ", def.partOfSpeech), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 77, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 77, columnNumber: 20 }, __self: this }, "Definition:"), " ", def.definition), def.examples.map((sentence, sIndex)=>/*#__PURE__*/ React.createElement("p", { key: sIndex, style: { fontStyle: 'italic' }, __source: { fileName: "", lineNumber: 79, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 79, columnNumber: 67 }, __self: this }, "Example:"), " ", sentence))))), /*#__PURE__*/ React.createElement("img", { src: "dictionary_picture.jpg", alt: "Full-page width dictionary illustration harmoniously beneath search results", className: "w-full mt-4 rounded-lg shadow", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("footer", { className: "mt-8 bg-white rounded-lg shadow p-4", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm text-black", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, "© 2023 English Dictionary App"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 mt-2", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://dictionary.cambridge.org/", className: "text-black underline", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "Cambridge Dictionary"), /*#__PURE__*/ React.createElement("a", { href: "https://www.collinsdictionary.com/", className: "text-black underline", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Collins Dictionary"), /*#__PURE__*/ React.createElement("a", { href: "https://www.oxfordlearnersdictionaries.com/", className: "text-black underline", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Oxford Learner's Dictionaries"), /*#__PURE__*/ React.createElement("a", { href: "https://www.merriam-webster.com/", className: "text-black underline", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "Merriam-Webster")))); }