function MainComponent() { const [showPassword, setShowPassword] = React.useState(false); const [password, setPassword] = React.useState(''); const togglePasswordVisibility = ()=>{ setShowPassword(!showPassword); }; const updatePassword = (event)=>{ setPassword(event.target.value); }; const getPasswordStrength = ()=>{ if (password.length > 8 && /[A-Z]/.test(password) && /[0-9]/.test(password) && /[!@#$%^&*(),.?":{}|<>]/.test(password)) { return 'Strong'; } else if (password.length >= 6) { return 'Medium'; } else if (password) { return 'Weak'; } return ''; }; const passwordStrength = getPasswordStrength(); let passwordStrengthColor = 'bg-red-500'; switch(passwordStrength){ case 'Strong': passwordStrengthColor = 'bg-green-500'; break; case 'Medium': passwordStrengthColor = 'bg-yellow-500'; break; case 'Weak': passwordStrengthColor = 'bg-red-500'; break; } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F7F8FA]", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-6 w-full max-w-4xl bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-[#333] mb-8 font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Multi-Level Marketing"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-xl", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6 relative", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "password", className: "block text-md mb-2 font-roboto text-[#333]", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Password"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center border rounded-lg", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: showPassword ? "text" : "password", id: "password", name: "password", onChange: updatePassword, className: "w-full p-2 pl-10 focus:outline-none focus:border-[#017aff] border-0 rounded-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: `cursor-pointer fas ${showPassword ? 'fa-eye-slash' : 'fa-eye'} text-[#AAA] mr-3`, onClick: togglePasswordVisibility, __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full h-2 rounded-lg overflow-hidden my-2", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `h-full ${passwordStrengthColor} transition-width duration-500 ease-in-out`, style: { width: password ? `${password.length > 8 ? 100 : password.length / 8 * 100}%` : '0%' }, __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, passwordStrength))))); }