function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [image, setImage] = React.useState(null); const handleSubmit = async (e)=>{ e.preventDefault(); const response = await fetch(`https://api.fakeimg.ai/generate?text=${encodeURIComponent(prompt)}`); const data = await response.json(); setImage(data.imageURL); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center p-4 bg-gray-100", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-blue-600 text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, "Bing Image Creator")), /*#__PURE__*/ React.createElement("main", { className: "flex-grow w-full flex flex-col items-center mt-8", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl bg-white p-4 shadow-md rounded-md", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-roboto mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Enter a text prompt to generate an image:"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "prompt", className: "w-full p-2 border border-gray-300 rounded-md", placeholder: "Type your prompt here...", value: prompt, onChange: (e)=>setPrompt(e.target.value), __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-600 text-white p-2 rounded-md font-roboto hover:bg-blue-700", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Generate Image"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl bg-white p-4 shadow-md rounded-md mt-8 flex justify-center items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, image ? /*#__PURE__*/ React.createElement("img", { src: image, alt: "Generated result", className: "w-[400px] h-[400px] object-cover", __source: { fileName: "", lineNumber: 32, columnNumber: 20 }, __self: this }) : /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 110 }, __self: this }, "Generated image will appear here.")))); }