52 lines
1.1 KiB
TypeScript
52 lines
1.1 KiB
TypeScript
import React from "react";
|
|
import { View, Text, TextInput, StyleSheet, TextInputProps } from "react-native";
|
|
|
|
interface InputProps extends TextInputProps {
|
|
label: string;
|
|
error?: string;
|
|
}
|
|
|
|
export function Input({ label, error, style, ...props }: InputProps) {
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text style={styles.label}>{label}</Text>
|
|
<TextInput
|
|
style={[styles.input, error && styles.inputError, style]}
|
|
placeholderTextColor="#9ca3af"
|
|
{...props}
|
|
/>
|
|
{error && <Text style={styles.errorText}>{error}</Text>}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
marginBottom: 16,
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
fontWeight: "600",
|
|
color: "#374151",
|
|
marginBottom: 8,
|
|
},
|
|
input: {
|
|
backgroundColor: "white",
|
|
borderWidth: 1,
|
|
borderColor: "#e5e7eb",
|
|
borderRadius: 8,
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
fontSize: 16,
|
|
color: "#1f2937",
|
|
},
|
|
inputError: {
|
|
borderColor: "#ef4444",
|
|
},
|
|
errorText: {
|
|
fontSize: 12,
|
|
color: "#ef4444",
|
|
marginTop: 4,
|
|
},
|
|
});
|