72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { TextInput, Text, View, StyleSheet, TextInputProps } from 'react-native';
|
|
import { COLORS, SPACING, FONT_SIZE, BORDER_RADIUS } from '@shared/theme';
|
|
|
|
interface InputProps extends TextInputProps {
|
|
label?: string;
|
|
error?: string;
|
|
helperText?: string;
|
|
}
|
|
|
|
export const Input: React.FC<InputProps> = ({
|
|
label,
|
|
error,
|
|
helperText,
|
|
style,
|
|
...props
|
|
}) => {
|
|
return (
|
|
<View style={styles.container}>
|
|
{label && <Text style={styles.label}>{label}</Text>}
|
|
<TextInput
|
|
style={[
|
|
styles.input,
|
|
error && styles.inputError,
|
|
style,
|
|
]}
|
|
placeholderTextColor={COLORS.textLight}
|
|
{...props}
|
|
/>
|
|
{error && <Text style={styles.errorText}>{error}</Text>}
|
|
{helperText && !error && (
|
|
<Text style={styles.helperText}>{helperText}</Text>
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
marginBottom: SPACING.md,
|
|
},
|
|
label: {
|
|
fontSize: FONT_SIZE.sm,
|
|
fontWeight: '600',
|
|
color: COLORS.text,
|
|
marginBottom: SPACING.xs,
|
|
},
|
|
input: {
|
|
backgroundColor: COLORS.surface,
|
|
borderWidth: 1,
|
|
borderColor: COLORS.border,
|
|
borderRadius: BORDER_RADIUS.md,
|
|
paddingHorizontal: SPACING.md,
|
|
paddingVertical: SPACING.sm,
|
|
fontSize: FONT_SIZE.md,
|
|
color: COLORS.text,
|
|
},
|
|
inputError: {
|
|
borderColor: COLORS.danger,
|
|
},
|
|
errorText: {
|
|
fontSize: FONT_SIZE.xs,
|
|
color: COLORS.danger,
|
|
marginTop: SPACING.xs,
|
|
},
|
|
helperText: {
|
|
fontSize: FONT_SIZE.xs,
|
|
color: COLORS.textSecondary,
|
|
marginTop: SPACING.xs,
|
|
},
|
|
});
|