71 lines
1.4 KiB
TypeScript
71 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
type StyleProp,
|
|
type TextInputProps,
|
|
type TextStyle,
|
|
type ViewStyle,
|
|
View,
|
|
} from 'react-native';
|
|
|
|
import { Palette } from '@/constants/palette';
|
|
import { FunnelSans } from '@/constants/fonts';
|
|
import { Radius, Spacing } from '@/constants/styles';
|
|
|
|
type InputProps = TextInputProps & {
|
|
label?: string;
|
|
error?: string | null;
|
|
containerStyle?: StyleProp<ViewStyle>;
|
|
inputStyle?: StyleProp<TextStyle>;
|
|
};
|
|
|
|
export function Input({
|
|
label,
|
|
error,
|
|
containerStyle,
|
|
inputStyle,
|
|
...textInputProps
|
|
}: InputProps) {
|
|
return (
|
|
<View style={[styles.container, containerStyle]}>
|
|
{label ? <Text style={styles.label}>{label}</Text> : null}
|
|
|
|
<TextInput
|
|
placeholderTextColor={Palette.black}
|
|
style={[styles.input, inputStyle]}
|
|
{...textInputProps}
|
|
/>
|
|
|
|
{error ? <Text style={styles.error}>{error}</Text> : null}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default Input;
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
gap: Spacing.sm,
|
|
},
|
|
label: {
|
|
...FunnelSans.semiBold14,
|
|
color: Palette.black,
|
|
},
|
|
input: {
|
|
...FunnelSans.regular16,
|
|
borderWidth: 1,
|
|
borderColor: Palette.gray,
|
|
borderRadius: Radius.lg,
|
|
backgroundColor: Palette.white,
|
|
color: Palette.black,
|
|
paddingHorizontal: Spacing.md,
|
|
paddingVertical: 14,
|
|
},
|
|
error: {
|
|
...FunnelSans.semiBold14,
|
|
color: Palette.danger,
|
|
},
|
|
});
|