function SearchQueryInput({ value, onChange }) { return /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Enter search query...", className: "w-full p-2 border border-gray-300 rounded mb-4", value: value, onChange: (e)=>onChange(e.target.value), __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function SearchQueryInputStory() { const [searchValue, setSearchValue] = React.useState(''); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SearchQueryInput, { value: searchValue, onChange: setSearchValue, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function MainComponent() { const [results, setResults] = React.useState([]); const handleSearch = async (event)=>{ event.preventDefault(); const query = event.target.search.value; const response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(query)}`, { method: 'GET' }); const data = await response.json(); if (data.status === 'success') { setResults(data.items); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Google Search Integration"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md", onSubmit: handleSearch, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Enter search query...", className: "w-full p-2 border border-gray-300 rounded mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white py-2 px-4 rounded w-full hover:bg-blue-700 transition", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Search")), /*#__PURE__*/ React.createElement("div", { id: "results", className: "w-full max-w-md mt-6", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, results.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-2 border-b border-gray-200", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", className: "text-blue-500", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, item.title)), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, item.snippet), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, item.displayLink))))); }