function MainComponent() { const [searchQuery, setSearchQuery] = React.useState(''); const [searchResults, setSearchResults] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const handleSearch = async ()=>{ setIsLoading(true); try { const response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(searchQuery)}`); const data = await response.json(); if (data.status === 'success') { setSearchResults(data.items); } } catch (error) { setSearchResults([]); } setIsLoading(false); }; const handleSubmit = (event)=>{ event.preventDefault(); handleSearch(); }; const searchInput = /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search...", className: "w-full p-2 border border-gray-300 rounded-md font-roboto", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }); const searchButton = /*#__PURE__*/ React.createElement("button", { type: "submit", className: `w-full p-2 mt-4 text-white rounded-md font-roboto shadow-lg transition ease-in-out duration-300 ${isLoading ? 'bg-blue-300 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-700 active:scale-95'}`, disabled: isLoading, __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, isLoading ? 'Loading...' : 'Search'); const resultItem = (item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 border-b border-gray-200", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.link, className: "font-semibold text-blue-600 hover:underline font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 font-roboto mt-1", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, item.snippet)); const searchResultsList = /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, searchResults.length > 0 ? searchResults.map((item, index)=>resultItem(item, index)) : !isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 23 }, __self: this }, "No results found")); const searchForm = /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg mx-auto mt-16", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, searchInput, searchButton, searchResultsList); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-6 font-roboto", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, "Google Search Integration"), searchForm, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, ` .button-enter { transform: scaleX(1); } .button-active { transform: scaleX(0.95); } .button-leave { transform: scaleX(1); } `)); }