134 lines
4.3 KiB
TypeScript
134 lines
4.3 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 '@/lib/background-uploader/types';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Alert, Image, StyleSheet, View } from 'react-native';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
import FilesUploader from '../file-upload/files-uploader';
|
|
import StepButton from '../ui/button/stepButton';
|
|
|
|
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();
|
|
const insets = useSafeAreaInsets();
|
|
|
|
return (
|
|
<View style={[styles.container, { paddingBottom: insets.bottom, paddingTop: insets.top + 28 }]}>
|
|
<View style={styles.contentContainer}>
|
|
<ThemedText style={styles.title}>
|
|
{t('auth.userMessage.look', { ns: 'login' })}
|
|
</ThemedText>
|
|
<ThemedText style={styles.subtitle}>
|
|
{t('auth.userMessage.avatarText', { ns: 'login' })}
|
|
{"\n"}
|
|
{t('auth.userMessage.avatorText2', { ns: 'login' })}
|
|
</ThemedText>
|
|
{fileData[0]?.preview || fileData[0]?.previewUrl ? (
|
|
<Image
|
|
style={styles.avatarImage}
|
|
source={{ uri: fileData[0].preview || fileData[0].previewUrl }}
|
|
/>
|
|
) : avatar ? (
|
|
<Image
|
|
style={styles.avatarImage}
|
|
source={{ uri: avatar }}
|
|
/>
|
|
) : (
|
|
<LookSvg />
|
|
)}
|
|
<FilesUploader
|
|
onUploadComplete={(fileData) => {
|
|
setFileData(fileData as FileUploadItem[]);
|
|
}}
|
|
showPreview={false}
|
|
children={
|
|
<View style={styles.uploadButton}>
|
|
<ChoicePhoto />
|
|
<ThemedText style={styles.uploadButtonText}>
|
|
{t('auth.userMessage.choosePhoto', { ns: 'login' })}
|
|
</ThemedText>
|
|
</View>
|
|
}
|
|
/>
|
|
</View>
|
|
|
|
<View style={styles.footer}>
|
|
<StepButton
|
|
text={t('auth.userMessage.next', { ns: 'login' })}
|
|
onPress={() => {
|
|
if (fileData[0]?.preview || fileData[0]?.previewUrl || avatar) {
|
|
handleUser()
|
|
} else {
|
|
Alert.alert(t('auth.userMessage.avatarRequired', { ns: 'login' }))
|
|
}
|
|
}}
|
|
isLoading={isLoading}
|
|
bg="#FFFFFF"
|
|
color="#4C320C"
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: '#AC7E35',
|
|
paddingHorizontal: 24,
|
|
justifyContent: 'space-between',
|
|
},
|
|
contentContainer: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
gap: 28
|
|
},
|
|
title: {
|
|
fontSize: 32,
|
|
lineHeight: 36,
|
|
fontWeight: 'bold',
|
|
color: '#FFFFFF',
|
|
},
|
|
subtitle: {
|
|
fontSize: 14,
|
|
color: "#fff",
|
|
textAlign: 'center',
|
|
marginBottom: 16,
|
|
},
|
|
avatarImage: {
|
|
borderRadius: 150,
|
|
width: 215,
|
|
height: 215,
|
|
marginBottom: 16,
|
|
},
|
|
uploadButton: {
|
|
width: '100%',
|
|
borderRadius: 999,
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 13,
|
|
alignItems: 'center',
|
|
backgroundColor: '#FFF8DE',
|
|
flexDirection: 'row',
|
|
gap: 8,
|
|
},
|
|
uploadButtonText: {
|
|
color: '#4C320C',
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
},
|
|
footer: {
|
|
width: '100%',
|
|
}
|
|
});
|