function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(''); const [searchResults, setSearchResults] = React.useState([]); const handleSearchChange = (e)=>{ setSearchTerm(e.target.value); }; const performSearch = ()=>{ setSearchResults([ "Result for " + searchTerm, "Another result for " + searchTerm ]); }; React.useEffect(()=>{ if (searchTerm) { performSearch(); } }, [ searchTerm ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full min-h-screen bg-[#F0F2F5]", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-5 left-5", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, "About Me")), /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-[#121212] mt-10", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "Website Search Engine"), /*#__PURE__*/ React.createElement("div", { className: "my-8 flex items-center", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search...", className: "w-full max-w-md px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 border border-gray-300 rounded-l", value: searchTerm, onChange: handleSearchChange, __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-6 py-3 rounded-r font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl p-5 bg-white rounded shadow", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "divide-y divide-gray-200", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, searchResults.map((result, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "py-4", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }, result))))); }