checkbox Enhanced

src/components/Checkbox.tsx

@@ -1,28 +1,71 @@
 import React from "react";
 
-type CheckBoxProps = {
+/**
-  /**
+ * [*] A Checkbox Component
-   * here any text can be written to be a label for the checkbox
+ * 
-   */
+ * [*] when the label is clicked => The checkbox will be checked
-  label: string;
+ * 
-  /**
+ * [*] for each item(row) you have to put the following in App.tsx:
-   * onChange callback
+ *    const [isCheckedA, setIsCheckedA] = useState(true);
-   */
+      const handleChangeA = (e: React.ChangeEvent<HTMLInputElement>) => {
-  onChange?: (value: boolean) => void;
+      setIsCheckedA(e.target.checked);
-} & Omit<React.HTMLProps<HTMLInputElement>, "onChange" | "type">;
+      }; 
+ * 
+ * [*] to create this component, you have to provide the following:
+ * [1] label
+ * [2] if the item is checked or not.
+ * 
+ * [*] A good example will be:
+const App: React.FC = () => 
+{
+    const [isCheckedA, setIsCheckedA] = useState(true);
+    const handleChangeA = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setIsCheckedA(e.target.checked);
+    };
 
-const CheckBox = ({ className, onChange, label, ...props }: CheckBoxProps) => {
+    const [isCheckedB, setIsCheckedB] = useState(true);
+    const handleChangeB = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setIsCheckedB(e.target.checked);
+    };
+
+    return (
+      <div className="App">
+        
+        <Checkbox
+          handleChange={handleChangeA}
+          isChecked={isCheckedA}
+          label=" Leo Tolstoy "
+        />
+
+        <Checkbox
+          handleChange={handleChangeB}
+          isChecked={isCheckedB}
+          label=" Fyodor Dostoevsky "
+        />
+
+      </div>
+    );
+};
+
+*/
+
+interface Props {
+  isChecked: boolean;
+  handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label: string;
+}
+
+const Checkbox = (props: Props) => {
   return (
-    <div className="d-flex align-center">
+    <div>
       <input
-        onChange={() => onChange && onChange(!props.checked)}
-        className="hover:bg-sky-700 focus:bg-sky-900 active:bg-sky-300 text-black"
         type="checkbox"
-        {...props}
+        id={props.label}
+        checked={props.isChecked}
+        onChange={props.handleChange}
       />
-      <label> {label} </label>
+      <label htmlFor={props.label}>{props.label}</label>
     </div>
   );
 };
-
+export default Checkbox;
-export default CheckBox;