Further Refactoring of the Settings

app/components/settings/PrivacySettings.tsx

@@ -0,0 +1,50 @@
+// PrivacySettings.tsx
+import React from 'react';
+
+interface PrivacySettingsProps {
+  selectedOption: string; // The currently selected option
+  handleRadioChange: (option: string) => void; // Function to handle option changes
+  openSourceMode: boolean; // Boolean to check if the mode is open source
+}
+
+const PrivacySettings: React.FC<PrivacySettingsProps> = ({ selectedOption, handleRadioChange, openSourceMode }) => {
+  return (
+    <>
+      {/* AI Mode Radio Options */}
+      <div className="settings-option">
+        <p>Disable Options:</p>
+        <div className="slider">
+          {/* Offline */}
+          <div
+            className={`slider-option ${selectedOption === 'Offline' ? 'active' : ''}`}
+            onClick={() => handleRadioChange('Offline')} // Allow selection only if not in open-source mode
+          >
+            Offline tools{openSourceMode ? ' (FOSS)' : ''}
+          </div>
+
+          {/* Online */}
+          <div
+            className={`slider-option ${selectedOption === 'Online' ? 'active' : ''}`}
+            onClick={() => handleRadioChange('Online')}
+          >
+            Online tools{openSourceMode ? ' (FOSS)' : ''}
+          </div>
+
+          {/* None */}
+          <div
+            className={`slider-option ${selectedOption === 'None' ? 'active' : ''}`}
+            onClick={() => handleRadioChange('None')}
+          >
+            None{openSourceMode ? ' (FOSS)' : ''}
+          </div>
+        </div>        
+        <br />
+        <p>
+          After changing the preferred settings, please reload the website so it can update itself properly.
+        </p>
+      </div>
+    </>
+  );
+};
+
+export default PrivacySettings;