Further Refactoring of the Settings

app/components/settings/DropDownTheme.tsx

@@ -0,0 +1,41 @@
+// ThemeDropdown.tsx
+import React from 'react';
+import { applyTheme, applyCustomTheme } from './theme';
+
+const ThemeDropdown: React.FC<{
+  selectedTheme: string;
+  setSelectedTheme: (theme: string) => void;
+}> = ({ selectedTheme, setSelectedTheme }) => {
+  const themeOptions = [
+    { value: 'IOMARKET', label: 'IOMARKET' },
+    { value: 'WHITE', label: 'WHITE' },
+    { value: 'BLACK', label: 'BLACK' },
+    { value: 'CUSTOM', label: 'CUSTOM' },
+  ];
+
+  return (
+    <div className="settings-option">
+      <p>Select Theme</p>
+      <select
+        value={selectedTheme}
+        onChange={(e) => {
+          const theme = e.target.value;
+          if (theme !== 'default') {
+            setSelectedTheme(theme);
+            localStorage.setItem('selectedTheme', theme);
+            applyTheme(theme); // Ensure you define applyTheme
+          }
+        }}
+      >
+        <option value="default">Select your style...</option>
+        {themeOptions.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default ThemeDropdown;