72 lines
1.4 KiB
TypeScript
72 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
TextInput,
|
|
StyleSheet,
|
|
TextInputProps,
|
|
} from "react-native";
|
|
import { useTheme } from "../contexts/ThemeContext";
|
|
|
|
interface InputProps extends TextInputProps {
|
|
label: string;
|
|
error?: string;
|
|
}
|
|
|
|
export function Input({ label, error, style, ...props }: InputProps) {
|
|
const { colors, typography } = useTheme();
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Text
|
|
style={[typography.h4, { color: colors.textPrimary }, styles.label]}
|
|
>
|
|
{label}
|
|
</Text>
|
|
<TextInput
|
|
style={[
|
|
styles.input,
|
|
{
|
|
backgroundColor: colors.surface,
|
|
borderColor: error ? colors.danger : colors.border,
|
|
color: colors.textPrimary,
|
|
},
|
|
style,
|
|
]}
|
|
placeholderTextColor={colors.textTertiary}
|
|
{...props}
|
|
/>
|
|
{error && (
|
|
<Text
|
|
style={[
|
|
typography.caption,
|
|
styles.errorText,
|
|
{ color: colors.danger },
|
|
]}
|
|
>
|
|
{error}
|
|
</Text>
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
marginBottom: 16,
|
|
},
|
|
label: {
|
|
marginBottom: 8,
|
|
},
|
|
input: {
|
|
borderWidth: 1,
|
|
borderRadius: 12,
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 14,
|
|
fontSize: 16,
|
|
},
|
|
errorText: {
|
|
marginTop: 4,
|
|
},
|
|
});
|