89 lines
3.7 KiB
TypeScript
89 lines
3.7 KiB
TypeScript
import { Steps } from '@/app/(tabs)/user-message';
|
|
import ChoicePhoto from '@/assets/icons/svg/choicePhoto.svg';
|
|
import LookSvg from '@/assets/icons/svg/look.svg';
|
|
import { ThemedText } from '@/components/ThemedText';
|
|
import { FileUploadItem } from '@/types/upload';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { ActivityIndicator, Image, TouchableOpacity, View } from 'react-native';
|
|
import AutoUploadScreen from '../file-upload/autoUploadScreen';
|
|
import FilesUploader from '../file-upload/files-uploader';
|
|
import MediaStatsScreen from '../file-upload/getTotal';
|
|
|
|
interface Props {
|
|
setSteps?: (steps: Steps) => void;
|
|
fileData: FileUploadItem[];
|
|
setFileData: (fileData: FileUploadItem[]) => void;
|
|
isLoading: boolean;
|
|
handleUser: () => void;
|
|
avatar: string;
|
|
}
|
|
|
|
export default function Look(props: Props) {
|
|
const { fileData, setFileData, isLoading, handleUser, avatar } = props;
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<View className="flex-1 bg-textPrimary justify-between p-[2rem]">
|
|
<View className="flex-1 justify-center items-center">
|
|
<ThemedText className="text-4xl font-bold !text-white mb-[2rem]">
|
|
{t('auth.userMessage.look', { ns: 'login' })}
|
|
</ThemedText>
|
|
<ThemedText className="text-base !text-white/80 text-center mb-[2rem]">
|
|
{t('auth.userMessage.avatarText', { ns: 'login' })}
|
|
{"\n"}
|
|
{t('auth.userMessage.avatorText2', { ns: 'login' })}
|
|
</ThemedText>
|
|
{
|
|
fileData[0]?.preview
|
|
?
|
|
<Image
|
|
className='rounded-full w-[10rem] h-[10rem]'
|
|
source={{ uri: fileData[0].preview }}
|
|
/>
|
|
:
|
|
avatar
|
|
?
|
|
<Image
|
|
className='rounded-full w-[10rem] h-[10rem]'
|
|
source={{ uri: avatar }}
|
|
/>
|
|
:
|
|
<LookSvg />
|
|
}
|
|
<FilesUploader
|
|
onUploadComplete={(fileData) => {
|
|
setFileData(fileData as FileUploadItem[]);
|
|
}}
|
|
showPreview={false}
|
|
children={
|
|
<View className="w-full rounded-full px-4 py-2 mt-4 items-center bg-inputBackground flex-row flex gap-2">
|
|
<ChoicePhoto />
|
|
<ThemedText className="text-textTertiary text-lg font-semibold">
|
|
{t('auth.userMessage.choosePhoto', { ns: 'login' })}
|
|
</ThemedText>
|
|
</View>
|
|
}
|
|
/>
|
|
<AutoUploadScreen />
|
|
<MediaStatsScreen />
|
|
</View>
|
|
|
|
<View className="w-full">
|
|
<TouchableOpacity
|
|
className={`w-full bg-white rounded-full p-4 items-center ${isLoading ? 'opacity-70' : ''}`}
|
|
onPress={handleUser}
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? (
|
|
<ActivityIndicator color="#000" />
|
|
) : (
|
|
<ThemedText className="text-textTertiary text-lg font-semibold">
|
|
{t('auth.userMessage.next', { ns: 'login' })}
|
|
</ThemedText>
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|