managarten/apps-archived/presi/apps/mobile/components/atoms/Input.tsx

import { TextInput, View, Text, StyleSheet } from 'react-native';

interface InputProps {
	value: string;
	onChangeText: (text: string) => void;
	placeholder?: string;
	secureTextEntry?: boolean;
	label?: string;
	error?: string;
}

export const Input = ({
	value,
	onChangeText,
	placeholder,
	secureTextEntry = false,
	label,
	error,
}: InputProps) => {
	return (
		<View style={styles.container}>
			{label && <Text style={styles.label}>{label}</Text>}
			<TextInput
				value={value}
				onChangeText={onChangeText}
				placeholder={placeholder}
				secureTextEntry={secureTextEntry}
				style={[styles.input, error && styles.inputError]}
			/>
			{error && <Text style={styles.error}>{error}</Text>}
		</View>
	);
};

const styles = StyleSheet.create({
	container: {
		marginBottom: 16,
	},
	label: {
		fontSize: 16,
		marginBottom: 8,
		color: '#000',
	},
	input: {
		borderWidth: 1,
		borderColor: '#ccc',
		borderRadius: 8,
		padding: 12,
		fontSize: 16,
	},
	inputError: {
		borderColor: '#ff0000',
	},
	error: {
		color: '#ff0000',
		fontSize: 14,
		marginTop: 4,
	},
});