function MainComponent() { const [images, setImages] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const [searchQuery, setSearchQuery] = React.useState(''); const fetchImages = async (event)=>{ event.preventDefault(); setIsLoading(true); const query = event.target.search.value; const response = await fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(query)}`, { method: 'GET' }); if (!response.ok) { setIsLoading(false); console.error("Error fetching data"); return; } const data = await response.json(); setImages(data.items); setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] flex flex-col items-center pt-10", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-roboto text-[#121212] mb-6", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, "SNSのようなサイト"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px] bg-white shadow-md rounded-lg overflow-hidden mb-6", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: fetchImages, __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "search", className: "block text-sm font-medium text-[#121212] mb-2", __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, "画像検索"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "search", name: "search", placeholder: "検索クエリを入力", className: "block w-full p-3 border border-[#ccc] rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-3 px-4 bg-blue-500 text-white rounded-md shadow hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, isLoading ? '検索中...' : '画像を検索')))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 shadow-md rounded-lg", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: image.contextLink, target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.thumbnailImageUrl, alt: `${image.title}`, className: "w-full", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-2 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: image.contextLink, target: "_blank", rel: "noopener noreferrer", className: "font-roboto text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, image.title)))))); }