Refactor to new ThemedInput component

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;