Further Refactoring of the Settings

app/components/settings/TextSettings.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+interface TextSettingProps {
+  label: string; // The label to display
+  value: string; // The current text value
+  setValue: (newText: string) => void; // The method to update the state
+  type: 'text' | 'email' | 'password'; // The type of input field
+}
+
+const TextSetting: React.FC<TextSettingProps> = ({ label, value, setValue, type }) => {
+  const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newText = e.target.value; // Get the new value from the input
+    setValue(newText); // Update the state in the parent component
+  };
+
+  return (
+    <div className="settings-option">
+      <label>{label}</label>
+      <input
+        type={type} // Use the type prop for the input
+        value={value} // Set the current value
+        onChange={handleTextChange} // Handle input changes
+      />
+    </div>
+  );
+};
+
+export default TextSetting;