function MainComponent() { const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(''); const handleLogin = async (event)=>{ event.preventDefault(); setLoading(true); setError(''); try { // Mock API call here await new Promise((resolve)=>setTimeout(resolve, 2000)); } catch (e) { setError('Failed to login. Please try again.'); } setLoading(false); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "bg-red-500 p-2 text-center font-bold text-white uppercase", style: { animation: 'slideIn 0.5s ease-out' }, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, "This program is still under development. Some information may be incorrect or missing."), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#121212]", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-4 text-3xl font-bold text-white font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "NAV Login"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleLogin, className: "w-full max-w-xs p-8 space-y-6 bg-[#232323] rounded shadow-md", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, error && /*#__PURE__*/ React.createElement("p", { className: "text-center text-red-600", __source: { fileName: "", lineNumber: 32, columnNumber: 21 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-medium text-white", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { name: "email", type: "email", required: true, className: "w-full px-3 py-2 mt-1 text-white bg-gray-700 border border-gray-600 rounded focus:outline-none focus:border-blue-500", onChange: (e)=>setEmail(e.target.value), style: { animation: 'inputFocusAnimation 0.5s ease-out' }, disabled: loading, __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 text-sm font-medium text-white", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", required: true, className: "w-full px-3 py-2 mt-1 text-white bg-gray-700 border border-gray-600 rounded focus:outline-none focus:border-blue-500", onChange: (e)=>setPassword(e.target.value), disabled: loading, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-between space-y-3 sm:flex-row sm:space-y-0", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-sm text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Forgot Password"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: `px-4 py-2 font-semibold ${loading ? 'bg-blue-300' : 'bg-blue-500 hover:bg-blue-600'} text-gray-900 rounded`, disabled: loading, __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, loading ? 'Loading...' : 'Sign In')), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-sm text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Create Account"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, ` @keyframes slideIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes inputFocusAnimation { 0% { background-color: #374151; /* bg-gray-700 */ } 100% { background-color: #111827; /* bg-gray-900 */ } } `))); }