function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [generatedImage, setGeneratedImage] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleSubmit = (e)=>{ e.preventDefault(); setIsLoading(true); setTimeout(()=>{ setGeneratedImage('/placeholder-image.jpg'); setIsLoading(false); }, 2000); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center text-gray-900 mb-8", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "Midjourney-like AI Image Generator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-8", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center border-b border-gray-300 py-2", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", value: prompt, onChange: (e)=>setPrompt(e.target.value), placeholder: "Enter your image prompt...", className: "appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "flex-shrink-0 bg-blue-500 hover:bg-blue-700 border-blue-500 hover:border-blue-700 text-sm border-4 text-white py-1 px-2 rounded", disabled: isLoading, __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 35, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-magic", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, isLoading ? 'Generating...' : 'Generate')))), generatedImage && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Generated Image:"), /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "AI-generated image based on user prompt", className: "w-full h-auto rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this })))); }