function MainComponent() { const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [showPassword, setShowPassword] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); setIsLoading(true); try { // Add logic to handle form submission here console.log('Email:', email); console.log('Password:', password); // Simulate an async operation await new Promise((resolve)=>setTimeout(resolve, 2000)); } catch (error) { console.error('Error submitting form:', error); } finally{ setIsLoading(false); } }; const togglePasswordVisibility = ()=>{ setShowPassword(!showPassword); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#F4F4F4]", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-8 w-full max-w-md", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#121212] mb-4 font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Welcome to Our App"), /*#__PURE__*/ React.createElement("p", { className: "text-[#4F4F4F] mb-6 font-crimson-text", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Please log in to continue."), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block font-medium text-[#4F4F4F] mb-2 font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), className: "w-full border border-[#CFCFCF] rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#4A90E2] font-crimson-text", placeholder: "Enter your email", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "block font-medium text-[#4F4F4F] mb-2 font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: showPassword ? 'text' : 'password', id: "password", name: "password", value: password, onChange: (e)=>setPassword(e.target.value), className: "w-full border border-[#CFCFCF] rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#4A90E2] font-crimson-text", placeholder: "Enter your password", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", className: "absolute top-1/2 right-4 transform -translate-y-1/2 text-[#4F4F4F] focus:outline-none", onClick: togglePasswordVisibility, __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, showPassword ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-eye-slash", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-eye", __source: { fileName: "", lineNumber: 67, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: `w-full text-white font-medium rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-[#4A90E2] ${isLoading ? 'bg-[#CFCFCF] cursor-not-allowed' : 'bg-[#4A90E2] hover:bg-[#3A7AC2]'}`, disabled: isLoading, __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }), "Loading...") : 'Log In')))); }