function MainComponent() { const [query, setQuery] = React.useState(''); const [results, setResults] = React.useState([]); const fetchResults = async ()=>{ try { const response = await fetch('mytext.txt'); const text = await response.text(); const lines = text.split('\n'); const filteredLines = lines.filter((line)=>line.toLowerCase().includes(query.toLowerCase())); const mappedResults = filteredLines.map((line, index)=>({ id: index, name: line })); setResults(mappedResults); } catch (error) { console.error('Fetching results failed:', error); } }; const handleSubmit = (e)=>{ e.preventDefault(); fetchResults(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-[#333] mb-8", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "Search Engine"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col md:flex-row items-center justify-center gap-4 mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "query", value: query, onChange: (e)=>setQuery(e.target.value), className: "form-input px-4 py-2 border rounded-md border-[#ccc] w-full md:w-[400px]", placeholder: "Type here to search...", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-6 py-2 bg-[#007bff] text-white font-semibold rounded-md hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Search")), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[600px] bg-white shadow-md rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto text-[#333] mb-2", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Results:"), /*#__PURE__*/ React.createElement("ul", { className: "list-none", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, results.map((result)=>/*#__PURE__*/ React.createElement("li", { key: result.id, className: "border-b border-[#eee] last:border-b-0", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "block p-4 hover:bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto font-normal text-[#333]", __source: { fileName: "", lineNumber: 51, columnNumber: 19 }, __self: this }, result.name)))))))); }