Reusable checkbox

Author: w3bdesign

src/components/Product/ProductFilters.component.tsx

@@ -1,6 +1,7 @@
-import { Dispatch, SetStateAction } from 'react';
+import { Dispatch, SetStateAction, ChangeEvent } from 'react';
 import { Product, ProductType } from '@/types/product';
 import Button from '@/components/UI/Button.component';
+import Checkbox from '@/components/UI/Checkbox.component';
 
 interface ProductFiltersProps {
   selectedSizes: string[];
@@ -71,15 +72,13 @@ const ProductFilters = ({
           <h3 className="font-semibold mb-4">PRODUKT TYPE</h3>
           <div className="space-y-2">
             {productTypes.map((type) => (
-              <label key={type.id} className="flex items-center">
-                <input
-                  type="checkbox"
-                  className="form-checkbox"
-                  checked={type.checked}
-                  onChange={() => toggleProductType(type.id)}
-                />
-                <span className="ml-2">{type.name}</span>
-              </label>
+              <Checkbox
+                key={type.id}
+                id={type.id}
+                label={type.name}
+                checked={type.checked}
+                onChange={() => toggleProductType(type.id)}
+              />
             ))}
           </div>
         </div>

src/components/UI/Checkbox.component.tsx

@@ -0,0 +1,34 @@
+import { ChangeEvent } from 'react';
+
+interface ICheckboxProps {
+  id: string;
+  label: string;
+  checked: boolean;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+/**
+ * A reusable checkbox component with a label
+ * @function Checkbox
+ * @param {string} id - Unique identifier for the checkbox
+ * @param {string} label - Label text to display next to the checkbox
+ * @param {boolean} checked - Whether the checkbox is checked
+ * @param {function} onChange - Handler for when the checkbox state changes
+ * @returns {JSX.Element} - Rendered component
+ */
+const Checkbox = ({ id, label, checked, onChange }: ICheckboxProps) => {
+  return (
+    <label htmlFor={id} className="flex items-center py-2 cursor-pointer">
+      <input
+        id={id}
+        type="checkbox"
+        className="form-checkbox h-5 w-5 cursor-pointer"
+        checked={checked}
+        onChange={onChange}
+      />
+      <span className="ml-3 text-base">{label}</span>
+    </label>
+  );
+};
+
+export default Checkbox;