code refactor to reusable components like Buttons and Checkbox

src/projects/06-password-generator/components/Button.jsx

@@ -0,0 +1,8 @@
+const Button = ({ text, customClass, onClick }) => {
+  return (
+    <button className={customClass} onClick={onClick}>
+      {text}
+    </button>
+  );
+};
+export default Button;

src/projects/06-password-generator/components/Checkbox.jsx

@@ -0,0 +1,11 @@
+const Checkbox = ({ state, onChange, title }) => {
+  return (
+    <div className="checkbox">
+      <label>
+        <input type="checkbox" checked={state} onChange={onChange} />
+        {title}
+      </label>
+    </div>
+  );
+};
+export default Checkbox;

src/projects/06-password-generator/components/PasswordGenerator.jsx

@@ -3,6 +3,8 @@ import { characterData } from '../data/characterData';
 import '../styles.css';
 import usePasswordGenerator from '../hooks/usePasswordGenerator';
 import StrengthChecker from './StrengthChecker';
+import Button from './Button';
+import Checkbox from './Checkbox';
 
 const PasswordGenerator = () => {
   const [passwordLength, setPasswordLength] = useState(8);
@@ -11,8 +13,8 @@ const PasswordGenerator = () => {
 
   // custom hook
   const { error, password, generatePassword } = usePasswordGenerator();
-  // console.log(error, password);
 
+  // inputs handle functions
   const handleLength = (e) => {
     const length = e.target.value;
     setPasswordLength(length);
@@ -46,9 +48,11 @@ const PasswordGenerator = () => {
           {password && (
             <header className="password">
               <p className="pwd">{password}</p>
-              <button className="btn copyBtn" onClick={handleCopy}>
-                {copied ? 'copied' : 'copy'}
-              </button>
+              <Button
+                text={copied ? 'copied' : 'copy'}
+                onClick={handleCopy}
+                customClass={'btn copyBtn'}
+              />
             </header>
           )}
 
@@ -70,40 +74,32 @@ const PasswordGenerator = () => {
           <div className="checkboxes">
             {checkboxData.map((checkbox, index) => {
               return (
-                <div key={index} className="checkbox">
-                  <label>
-                    <input
-                      type="checkbox"
-                      checked={checkbox.state}
-                      onChange={() => {
-                        handleCheckboxData(index);
-                      }}
-                    />
-                    {checkbox.title}
-                  </label>
-                </div>
+                <Checkbox
+                  key={index}
+                  state={checkbox.state}
+                  onChange={() => {
+                    handleCheckboxData(index);
+                  }}
+                  title={checkbox.title}
+                />
               );
             })}
           </div>
           {/* strength or error*/}
           {error ? (
             <p className="error-msg">Select at least one checkbox</p>
           ) : (
-            <StrengthChecker
-              length={passwordLength}
-              checkboxData={checkboxData}
-            />
+            <StrengthChecker password={password} checkboxData={checkboxData} />
           )}
 
           {/* generate button */}
-          <button
-            className="btn generateBtn"
+          <Button
+            text={'generate password'}
             onClick={() => {
               generatePassword(passwordLength, checkboxData);
             }}
-          >
-            generate password
-          </button>
+            customClass={'btn generateBtn'}
+          />
         </div>
       </div>
     </section>

src/projects/06-password-generator/components/StrengthChecker.jsx

@@ -1,9 +1,10 @@
 import { useEffect, useState } from 'react';
 
-const StrengthChecker = ({ length, checkboxData }) => {
+const StrengthChecker = ({ password, checkboxData }) => {
   const [strength, setStrength] = useState('');
 
   useEffect(() => {
+    const length = password.length;
     const charTypeCount = checkboxData.reduce((acc, curr) => {
       if (curr.state) {
         acc++;
@@ -28,7 +29,7 @@ const StrengthChecker = ({ length, checkboxData }) => {
     } else {
       setStrength('');
     }
-  }, [length, checkboxData]);
+  }, [password]);
   return (
     <div className="strength">
       <span>strength:</span>

src/projects/06-password-generator/styles.css

@@ -15,6 +15,7 @@
   align-items: center;
 }
 .password p {
+  font-size: 1.5rem;
   margin: 0;
 }
 .length {
@@ -45,6 +46,7 @@
   display: flex;
 }
 .checkbox input {
+  cursor: pointer;
   margin-right: 0.5rem;
 }
 .strength {