function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(''); const [searchResults, setSearchResults] = React.useState([]); const [showSearch, setShowSearch] = React.useState(true); const [selectedSite, setSelectedSite] = React.useState(''); const sites = [ 'apples', 'gorillas', 'cats', 'salads' ]; const handleSearch = (e)=>{ e.preventDefault(); const results = sites.filter((site)=>site.toLowerCase().includes(searchTerm.toLowerCase())); setSearchResults(results); }; const toggleView = ()=>{ setShowSearch(!showSearch); }; const selectSite = (site)=>{ setSelectedSite(site); setShowSearch(false); }; const renderSearchScreen = ()=>/*#__PURE__*/ React.createElement("div", { className: "max-w-3xl w-full bg-white rounded-lg shadow-lg p-8", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, className: "mb-6", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), placeholder: "Search for apples, gorillas, cats, or salads", className: "flex-grow p-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white py-2 px-4 rounded-r-lg hover:bg-blue-600 transition duration-300 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })))), searchResults.length > 0 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-blue-500 mb-4 font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Search Results"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside mb-6 font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, searchResults.map((result, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "cursor-pointer hover:text-blue-500", onClick: ()=>selectSite(result), __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, result)))), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-blue-500 mb-4 font-roboto", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, "Searchable Sites"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 mb-6", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, sites.map((site, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-blue-50 p-4 rounded-lg cursor-pointer hover:bg-blue-100", onClick: ()=>selectSite(site), __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2 font-crimson-text capitalize", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, site), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Click to view ", site))))); const renderSiteContent = ()=>/*#__PURE__*/ React.createElement("div", { className: "max-w-3xl w-full bg-white rounded-lg shadow-lg p-8", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-blue-500 mb-4 font-roboto capitalize", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, selectedSite), /*#__PURE__*/ React.createElement("article", { className: "font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "All About ", selectedSite), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "This is an article about ", selectedSite, ". It contains interesting facts and information related to ", selectedSite, "."), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-blue-100 p-8", __source: { fileName: "", lineNumber: 80, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-end mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleView, className: "bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-300 font-roboto", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, showSearch ? 'View Site' : 'Search')), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-blue-600 mb-6 font-crimson-text", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, "Search Engine"), showSearch ? renderSearchScreen() : renderSiteContent()); }