133 lines
4.2 KiB
TypeScript
133 lines
4.2 KiB
TypeScript
import { Steps } from '@/app/(tabs)/user-message';
|
|
import { ThemedText } from '@/components/ThemedText';
|
|
import { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Dimensions, KeyboardAvoidingView, Platform, StyleSheet, TextInput, View } from 'react-native';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
import StepButton from '../ui/button/stepButton';
|
|
|
|
interface Props {
|
|
setSteps: (steps: Steps) => void;
|
|
username: string;
|
|
setUsername: (username: string) => void;
|
|
}
|
|
|
|
export default function UserName(props: Props) {
|
|
const { setSteps, username, setUsername } = props
|
|
const { t } = useTranslation();
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const height = Dimensions.get('window').height;
|
|
const insets = useSafeAreaInsets();
|
|
const [error, setError] = useState('')
|
|
const handleUserName = () => {
|
|
if (!username) {
|
|
setError('Username is required')
|
|
return;
|
|
}
|
|
setIsLoading(true)
|
|
setSteps("look")
|
|
setIsLoading(false)
|
|
}
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
style={styles.keyboardAvoidingView}
|
|
>
|
|
<View style={[styles.container]}>
|
|
<View style={styles.flex1} />
|
|
<View style={[styles.inputContainer, { paddingBottom: insets.bottom }]}>
|
|
<View style={styles.contentContainer}>
|
|
<View style={styles.titleContainer}>
|
|
<ThemedText style={styles.titleText}>{t('auth.userMessage.title', { ns: 'login' })}</ThemedText>
|
|
</View>
|
|
<View style={styles.inputWrapper}>
|
|
<View style={styles.labelContainer}>
|
|
<ThemedText style={styles.labelText}>{t('auth.userMessage.username', { ns: 'login' })}</ThemedText>
|
|
<ThemedText style={styles.errorText}>{error}</ThemedText>
|
|
</View>
|
|
<TextInput
|
|
style={[styles.textInput, { marginBottom: height * 0.2 }]}
|
|
placeholder={t('auth.userMessage.usernamePlaceholder', { ns: 'login' })}
|
|
placeholderTextColor="#9CA3AF"
|
|
value={username}
|
|
onChangeText={setUsername}
|
|
/>
|
|
</View>
|
|
<StepButton text={t('auth.userMessage.next', { ns: 'login' })} onPress={handleUserName} isLoading={isLoading} />
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
keyboardAvoidingView: {
|
|
flex: 1,
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#FFB645',
|
|
height: '100%',
|
|
},
|
|
flex1: {
|
|
flex: 1,
|
|
},
|
|
inputContainer: {
|
|
width: '100%',
|
|
backgroundColor: '#FFFFFF',
|
|
padding: 16,
|
|
borderTopWidth: 1,
|
|
borderTopColor: '#E5E7EB',
|
|
borderTopLeftRadius: 50,
|
|
borderTopRightRadius: 50,
|
|
},
|
|
contentContainer: {
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
width: '100%',
|
|
gap: 16,
|
|
},
|
|
titleContainer: {
|
|
width: '100%',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: 20,
|
|
},
|
|
titleText: {
|
|
color: '#4C320C',
|
|
fontWeight: '600',
|
|
fontSize: 20,
|
|
marginBottom: 16,
|
|
},
|
|
inputWrapper: {
|
|
width: '100%',
|
|
marginBottom: 16,
|
|
},
|
|
labelContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginBottom: 10,
|
|
},
|
|
labelText: {
|
|
color: '#AC7E35',
|
|
marginLeft: 8,
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
},
|
|
errorText: {
|
|
color: '#E2793F',
|
|
fontSize: 14,
|
|
},
|
|
textInput: {
|
|
backgroundColor: '#FFF8DE',
|
|
borderRadius: 16,
|
|
padding: 20,
|
|
width: '100%',
|
|
}
|
|
});
|