71 lines
3.2 KiB
TypeScript
71 lines
3.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 { ActivityIndicator, KeyboardAvoidingView, Platform, TextInput, TouchableOpacity, View } from 'react-native';
|
|
|
|
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 [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={{ flex: 1 }}
|
|
>
|
|
<View className='bg-bgPrimary flex-1 h-full'>
|
|
<View className="flex-1" />
|
|
{/* Input container fixed at bottom */}
|
|
<View className="w-full bg-white p-4 border-t border-gray-200 rounded-t-3xl">
|
|
<View className="flex-col items-center justify-center w-full gap-[3rem]">
|
|
<View className='w-full flex flex-row items-center justify-between'>
|
|
<ThemedText className="text-textSecondary font-semibold">{t('auth.userMessage.title', { ns: 'login' })}</ThemedText>
|
|
<ThemedText className="text-[#E2793F] font-semibold">{error}</ThemedText>
|
|
</View>
|
|
<View className='w-full'>
|
|
<ThemedText className="!text-textPrimary ml-2 mb-2 font-semibold">{t('auth.userMessage.username', { ns: 'login' })}</ThemedText>
|
|
<TextInput
|
|
className="bg-inputBackground rounded-2xl p-4 w-full"
|
|
placeholder={t('auth.userMessage.usernamePlaceholder', { ns: 'login' })}
|
|
placeholderTextColor="#9CA3AF"
|
|
value={username}
|
|
onChangeText={setUsername}
|
|
/>
|
|
</View>
|
|
<TouchableOpacity
|
|
className={`w-full bg-[#E2793F] rounded-full text-[#fff] p-4 items-center mb-6 ${isLoading ? 'opacity-70' : ''} rounded-2xl`}
|
|
onPress={handleUserName}
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? (
|
|
<ActivityIndicator color="#fff" />
|
|
) : (
|
|
<ThemedText className="!text-white font-semibold">
|
|
{t('auth.userMessage.next', { ns: 'login' })}
|
|
</ThemedText>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
)
|
|
}
|