Refactor to new ThemedInput component

lib/components/EditModal.tsx

@@ -11,6 +11,7 @@ import { Colors } from '@/lib/constants/Colors';
 import { ThemedView } from '@/lib/components/ThemedView';
 import { ThemedText } from '@/lib/components/ThemedText';
 import { useColorScheme } from '@/lib/hooks/useColorScheme';
+import ThemedInput from '@/lib/components/ThemedInput';
 
 interface Field {
     name: string;
@@ -59,17 +60,13 @@ const CustomModal: React.FC<EditModalProps> = ({ title, visible, onClose, onSave
                 <ThemedText style={styles.text}>{title ? title : t( "modal.default.title" )}</ThemedText>
 
                 {fields.map( (field, index) => (
-                    <ThemedView key={index} style={styles.inputContainer}>
-                        {field.title && <ThemedText style={styles.inputTitle}>{field.title}</ThemedText>}
-                        <TextInput
-                            style={[ styles.input, { color: Colors[ colorScheme ].text } ]}
-                            placeholder={field.placeholder}
-                            onChangeText={(text) => handleInputChange( field.name, text )}
-                            value={inputValues[ field.name ] || ''}
-                            placeholderTextColor={Colors[ colorScheme ].text}
-                        />
-                    </ThemedView>
-
+                    <ThemedInput
+                        key={index}
+                        label={field.title}
+                        onChangeText={(text) => handleInputChange( field.name, text )}
+                        value={inputValues[ field.name ] || ''}
+                        placeholder={field.placeholder}
+                    />
                 ) )}
 
                 <ThemedView style={styles.buttonContainer}>

lib/components/ThemedInput.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { TextInput, StyleSheet, TextInputProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { ThemedView } from '@/lib/components/ThemedView';
+import { ThemedText } from '@/lib/components/ThemedText';
+import { Colors } from '@/lib/constants/Colors';
+import { useColorScheme } from '@/lib/hooks/useColorScheme';
+
+interface InputComponentProps extends TextInputProps {
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+}
+
+const ThemedInput: React.FC<InputComponentProps> = ({
+    label,
+    placeholder,
+    value,
+    onChangeText,
+    secureTextEntry = false,
+    keyboardType = 'default',
+    style,
+    inputStyle,
+    ...props
+}) => {
+    const colorScheme = useColorScheme() ?? 'light';
+
+    return (
+        <ThemedView style={[ styles.container, style ]}>
+            {label && <ThemedText style={styles.label}>{label}</ThemedText>}
+            <TextInput
+                style={[ styles.input, inputStyle, {
+                    color: Colors[ colorScheme ].text,
+                    borderColor: Colors[ colorScheme ].text
+                } ]}
+                placeholderTextColor={Colors[ colorScheme ].text}
+                placeholder={placeholder}
+                value={value}
+                onChangeText={onChangeText}
+                secureTextEntry={secureTextEntry}
+                keyboardType={keyboardType}
+                {...props}
+            />
+        </ThemedView>
+    );
+};
+
+const styles = StyleSheet.create( {
+    container: {
+        width: '100%',
+    },
+    label: {
+        marginBottom: 4,
+    },
+    input: {
+        width: '100%',
+        borderWidth: 1,
+        padding: 10,
+        paddingLeft: 20,
+        borderRadius: 3,
+        marginBottom: 10,
+    },
+} );
+
+export default ThemedInput;