function GenerateImageApp({ title, onSubmit, imageSrc }) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col justify-center items-center p-4 bg-gray-100", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold mb-4 font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-sm bg-white p-6 rounded shadow-md", onSubmit: onSubmit, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "prompt", className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, "Enter your prompt:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "prompt", name: "prompt", className: "w-full p-2 border border-gray-300 rounded mb-4", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "Generate")), imageSrc && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageSrc, alt: "Generated image based on prompt", className: "w-[300px] h-[300px] object-cover rounded", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }))); } function GenerateImageAppStory() { const handleSubmit = (event)=>{ event.preventDefault(); // Handle form submission }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GenerateImageApp, { title: "Generate an Image", onSubmit: handleSubmit, imageSrc: "path/to/generated-image.jpg", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this })); } function MainComponent() { const [imageSrc, setImageSrc] = React.useState(''); const handleSubmit = async (event)=>{ event.preventDefault(); const prompt = event.target.prompt.value; const generatedImage = `https://api.example.com/generate-image?prompt=${encodeURIComponent(prompt)}`; setImageSrc(generatedImage); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GenerateImageApp, { title: "Generate an Image", onSubmit: handleSubmit, imageSrc: imageSrc, __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); }