function MainComponent() { const [imageData, setImageData] = React.useState({ title: "", description: "", size: "medium" }); const [generatedImage, setGeneratedImage] = React.useState(null); const handleChange = (e)=>{ const { name, value } = e.target; setImageData({ ...imageData, [name]: value }); }; const handleSubmit = (e)=>{ e.preventDefault(); setGeneratedImage({ title: imageData.title, description: imageData.description, size: imageData.size }); }; const imageSizes = { small: "w-[200px] h-[200px]", medium: "w-[300px] h-[300px]", large: "w-[400px] h-[400px]" }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto mb-8", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, "Image Creation Tool"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg bg-white p-8 rounded shadow-md", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-crimson-text text-lg mb-2", htmlFor: "title", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Image Title"), /*#__PURE__*/ React.createElement("input", { className: "w-full mb-4 p-2 border rounded", type: "text", id: "title", name: "title", value: imageData.title, onChange: handleChange, __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block font-crimson-text text-lg mb-2", htmlFor: "description", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Image Description"), /*#__PURE__*/ React.createElement("textarea", { className: "w-full mb-4 p-2 border rounded", id: "description", name: "description", value: imageData.description, onChange: handleChange, __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block font-crimson-text text-lg mb-2", htmlFor: "size", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "Image Size"), /*#__PURE__*/ React.createElement("select", { className: "w-full mb-4 p-2 border rounded", id: "size", name: "size", value: imageData.size, onChange: handleChange, __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "small", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Small"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Medium"), /*#__PURE__*/ React.createElement("option", { value: "large", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Large")), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 transition duration-300", type: "submit", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Create Image 🖼️")), /*#__PURE__*/ React.createElement("div", { className: "mt-8 w-full max-w-lg", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Generated Image"), /*#__PURE__*/ React.createElement("div", { className: `${imageSizes[generatedImage?.size || "medium"]} bg-gray-200 flex items-center justify-center rounded border`, __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, generatedImage ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, generatedImage.title), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, generatedImage.description)) : /*#__PURE__*/ React.createElement("span", { className: "text-gray-700", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "No Image Generated")))); }