function MainComponent() { const [images, setImages] = React.useState([]); const [prompt, setPrompt] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const handleFormSubmit = async (e)=>{ e.preventDefault(); setIsLoading(true); try { const response = await fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(prompt)}`, { method: 'GET' }); const data = await response.json(); setImages(data.items); } catch (error) { console.error('Error fetching images', error); } finally{ setIsLoading(false); } }; const handleInputChange = (e)=>{ setPrompt(e.target.value); }; const submitButtonClass = isLoading ? 'cursor-not-allowed bg-[#9ca3af]' : 'bg-[#ff6363]'; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center h-screen bg-[#ffe5e5]", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg bg-white p-6 shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-2xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Find Your Staunch Unionist Match"), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#606060]", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Connect with those who share your patriotic zeal.")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", placeholder: "Enter patriotic keywords", value: prompt, onChange: handleInputChange, className: "w-full px-4 py-2 border rounded-lg text-[#121212] focus:outline-none focus:ring-2 focus:ring-[#575757]", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: `w-full py-2 rounded-lg font-semibold font-roboto text-white ${submitButtonClass}`, disabled: isLoading, __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, isLoading ? 'Searching...' : 'Search Images')), /*#__PURE__*/ React.createElement("div", { className: "mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 justify-center", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, images.map((img, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "max-w-xs shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: img.thumbnailImageUrl, alt: `Unionist themed image ${index + 1}`, className: "w-full h-auto rounded-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this })))))); }