function MainComponent() { const [passwordLength, setPasswordLength] = React.useState(12); const [generatedPassword, setGeneratedPassword] = React.useState(''); const [currentPage, setCurrentPage] = React.useState('login'); const handleChange = (event)=>{ setPasswordLength(event.target.value); generatePassword(event.target.value); }; const generatePassword = (length)=>{ const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+"; let newPassword = ""; for(let i = 0, n = charset.length; i < length; ++i){ newPassword += charset.charAt(Math.floor(Math.random() * n)); } setGeneratedPassword(newPassword); }; const handleNavigation = (page)=>{ setCurrentPage(page); }; const renderForm = ()=>{ switch(currentPage){ case 'login': return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "username", type: "text", placeholder: "Username", className: "block w-full p-2", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", placeholder: "Password", className: "block w-full p-2 my-4", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full p-2 bg-blue-500 text-white", onClick: ()=>handleNavigation('signup'), __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Create account")); case 'signup': return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "username", type: "text", placeholder: "Username", className: "block w-full p-2", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "password", type: "password", placeholder: "Password", className: "block w-full p-2 my-4", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "email", type: "email", placeholder: "Email", className: "block w-full p-2", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full p-2 bg-blue-500 text-white", onClick: ()=>handleNavigation('login'), __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Register")); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs mx-auto", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, renderForm()), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg mx-auto my-10", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "range", min: "1", max: "50", value: passwordLength, className: "w-full", onChange: handleChange, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-center py-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Password Length: ", passwordLength), /*#__PURE__*/ React.createElement("div", { className: "w-full p-4 bg-gray-200 text-center my-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, generatedPassword || 'Your generated password will appear here')), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, ` @keyframes slide { from { transform: translateX(0%); } to { transform: translateX(100%); } } `)); }