function FlexSearchField({ placeholder }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 13 }, __self: this }, "FLEX Search"), /*#__PURE__*/ React.createElement("input", { type: "search", name: "searchQuery", className: "w-full p-4 text-lg border-0 focus:ring-0", placeholder: placeholder, __source: { fileName: "", lineNumber: 5, columnNumber: 13 }, __self: this })); } function FlexSearchFieldStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(FlexSearchField, { placeholder: "Enter search query...", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this })); } function SearchQueryField({ placeholder, className }) { return /*#__PURE__*/ React.createElement("input", { type: "search", name: "searchQuery", className: `flex-grow p-4 text-lg border-0 focus:ring-0 ${className}`, placeholder: placeholder, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function SearchQueryFieldStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SearchQueryField, { placeholder: "Enter search query...", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { const [searchQuery, setSearchQuery] = React.useState(''); const [searchResults, setSearchResults] = React.useState([]); async function fetchData(query) { const response = await fetch(`https://api.example.com/search?query=${query}`); const data = await response.json(); setSearchResults(data); } function handleSubmit(e) { e.preventDefault(); fetchData(searchQuery); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Bi-directional Google Sheet Search"), /*#__PURE__*/ React.createElement(FlexSearchField, { placeholder: "Enhanced Search...", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("form", { className: "flex w-full max-w-xl bg-white shadow-md rounded-lg overflow-hidden my-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(SearchQueryField, { placeholder: "Enter search query...", className: "flex-grow", onChange: (e)=>setSearchQuery(e.target.value), value: searchQuery, __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#007BFF] text-white p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-search", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full max-w-xl", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Results:"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow-md rounded-lg", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, searchResults.length > 0 ? searchResults.map((result)=>/*#__PURE__*/ React.createElement("p", { key: result.id, __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, result.name)) : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "This area will display results from the Google Sheet.")))); }