Further Refactoring of the Settings

app/components/settings/DropDown.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface Option {
+  value: string; // The actual value to be used
+  label: string; // The label to display for the option
+}
+
+interface DropdownSettingProps {
+  label: string; // The label to display
+  value: string; // The current selected value
+  setValue: (newValue: string) => void; // The method to update the state
+  options: Option[]; // List of options for the dropdown
+}
+
+const DropdownSetting: React.FC<DropdownSettingProps> = ({ label, value, setValue, options }) => {
+  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newValue = e.target.value;
+    setValue(newValue);
+  };
+
+  return (
+    <div className="settings-option">
+      <label>{label}</label>
+      <select value={value} onChange={handleSelectChange}>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export default DropdownSetting;