function MainComponent() { const [searchQuery, setSearchQuery] = React.useState(""); const [imageResults, setImageResults] = React.useState([]); const handleSearch = async (e)=>{ e.preventDefault(); const response = await fetch(`https://api.openai.com/v1/dalle3/generate`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer YOUR_API_KEY` }, body: JSON.stringify({ prompt: searchQuery }) }); const data = await response.json(); setImageResults(data.data.map((item)=>({ id: item.id, urls: { small: item.url }, alt_description: searchQuery + ' - DALL·E 3 Generated Image' }))); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[url('/flowers.jpg')] bg-cover flex flex-col items-center pt-10", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl font-roboto text-[#5f6368] mb-8", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, "グーグル"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col items-center", onSubmit: handleSearch, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", className: "w-[500px] h-[46px] border-2 border-[#dfe1e5] rounded-full px-5 text-lg font-roboto shadow-sm focus:outline-none focus:shadow-outline", placeholder: "検索", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-5 w-[120px] h-[46px] bg-[#f8f9fa] text-[#3c4043] font-roboto text-base rounded hover:bg-[#f0f0f0] shadow-md", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "検索")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4 mt-8", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, imageResults.map((image)=>/*#__PURE__*/ React.createElement("div", { key: image.id, className: "max-w-xs text-center", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.urls.small, alt: image.alt_description, className: "w-full h-auto rounded", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-roboto mb-1", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, image.alt_description.split(' - ')[0]), /*#__PURE__*/ React.createElement("p", { className: "text-[24px] font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, image.alt_description.split(' - ')[1]))))); }