Further Refactoring of the Settings

app/components/settings/OpenSourceToggle.tsx

@@ -0,0 +1,41 @@
+// OpenSourceModeToggle.tsx
+import React from 'react';
+
+interface OpenSourceModeToggleProps {
+  openSourceMode: boolean; // Current state of open source mode
+  setOpenSourceMode: (value: boolean) => void; // Function to update open source mode
+  setSelectedOption: (value: string) => void; // Function to update the selected option
+}
+
+const OpenSourceModeToggle: React.FC<OpenSourceModeToggleProps> = ({ 
+  openSourceMode, 
+  setOpenSourceMode, 
+  setSelectedOption 
+}) => {
+  const handleToggleChange = () => {
+    const newValue = !openSourceMode;
+    setOpenSourceMode(newValue);
+    
+    // Update radio selection based on the new openSourceMode value
+    if (newValue) {
+      setSelectedOption('FOSS'); // Set to FOSS if enabling open source mode
+    } else {
+      setSelectedOption('None'); // Or any other default value when disabling
+    }
+  };
+
+  return (
+    <div className="settings-option">
+      <label>
+        <input
+          type="checkbox"
+          checked={openSourceMode}
+          onChange={handleToggleChange}
+        />
+        Enable Open Source Mode
+      </label>
+    </div>
+  );
+};
+
+export default OpenSourceModeToggle;