function PasswordStrengthField({ placeholder, onChange }) { return /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", placeholder: placeholder, className: "w-full p-4 text-lg border-2 border-gray-200 rounded-md focus:outline-none focus:border-blue-500", onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function PasswordStrengthFieldStory() { const handlePasswordChange = (event)=>{ console.log(event.target.value); // Placeholder for a password strength calculator feature. }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PasswordStrengthField, { placeholder: "Enter your password", onChange: handlePasswordChange, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function MainComponent() { const [strength, setStrength] = React.useState({ width: '0%', color: 'bg-red-500', text: 'Weak' }); const calculateStrength = (password)=>{ let strengthProperties = { width: '0%', color: 'bg-red-500', text: 'Weak' }; const length = password.length; let score = length > 5 ? 1 : 0; score += /[A-Z]/.test(password) ? 1 : 0; score += /[a-z]/.test(password) ? 1 : 0; score += /[0-9]/.test(password) ? 1 : 0; score += /[^A-Za-z0-9]/.test(password) ? 1 : 0; if (score >= 4) strengthProperties = { width: '100%', color: 'bg-green-500', text: 'Strong' }; else if (score === 3) strengthProperties = { width: '75%', color: 'bg-yellow-500', text: 'Good' }; else if (score === 2) strengthProperties = { width: '50%', color: 'bg-orange-400', text: 'Fair' }; setStrength(strengthProperties); }; const handlePasswordChange = (event)=>{ calculateStrength(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F7F7F7]", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-white shadow-lg rounded-lg w-full max-w-md", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-center text-[#333] mb-6", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Password Strength Calculator"), /*#__PURE__*/ React.createElement(PasswordStrengthField, { placeholder: "Enter your password", onChange: handlePasswordChange, __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 h-2 w-full rounded-full", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { width: strength.width }, className: `${strength.color} h-2 rounded-full`, __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-right text-sm mt-2 text-gray-600", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Strength: ", /*#__PURE__*/ React.createElement("span", { className: "font-medium", __source: { fileName: "", lineNumber: 33, columnNumber: 74 }, __self: this }, strength.text))))); }