Further Refactoring of the Settings

app/components/settings/CheckBox.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+interface CheckboxSettingProps {
+  label: string; // The label to display
+  checked: boolean; // The checked state of the checkbox
+  setChecked: (value: boolean) => void; // Method to update the state
+}
+
+const CheckboxSetting: React.FC<CheckboxSettingProps> = ({ label, checked, setChecked }) => {
+  const handleCheckboxChange = () => {
+    setChecked(!checked);
+  };
+
+  return (
+    <div className="settings-option">
+      <label>
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={handleCheckboxChange}
+        />
+        {label}
+      </label>
+    </div>
+  );
+};
+
+export default CheckboxSetting;