132 lines
3.1 KiB
TypeScript
132 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { Dimensions, View } from 'react-native';
|
|
import { Box, Image, Heading, HStack, Card, Text } from 'native-base';
|
|
import Translate from '../components/Translate';
|
|
import { useNavigation } from '../Navigation';
|
|
import TextButton from '../components/TextButton';
|
|
|
|
const UserMedals = () => {
|
|
return (
|
|
<Card marginX={20} marginY={10}>
|
|
<Heading>
|
|
<Translate translationKey="medals" />
|
|
</Heading>
|
|
<HStack alignItems={'row'} space="10">
|
|
<Image
|
|
source={{
|
|
uri: 'https://wallpaperaccess.com/full/317501.jpg',
|
|
}}
|
|
alt="Profile picture"
|
|
size="lg"
|
|
/>
|
|
<Image
|
|
source={{
|
|
uri: 'https://wallpaperaccess.com/full/317501.jpg',
|
|
}}
|
|
alt="Profile picture"
|
|
size="lg"
|
|
/>
|
|
<Image
|
|
source={{
|
|
uri: 'https://wallpaperaccess.com/full/317501.jpg',
|
|
}}
|
|
alt="Profile picture"
|
|
size="lg"
|
|
/>
|
|
<Image
|
|
source={{
|
|
uri: 'https://wallpaperaccess.com/full/317501.jpg',
|
|
}}
|
|
alt="Profile picture"
|
|
size="lg"
|
|
/>
|
|
</HStack>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const PlayerStats = () => {
|
|
const answer = 'Answer from back';
|
|
|
|
return (
|
|
<Card marginX={20} marginY={10}>
|
|
<Heading>
|
|
{' '}
|
|
<Translate translationKey="playerStats" />{' '}
|
|
</Heading>
|
|
<Text>
|
|
{' '}
|
|
<Translate translationKey="mostPlayedSong" /> {answer}{' '}
|
|
</Text>
|
|
<Text>
|
|
{' '}
|
|
<Translate translationKey="goodNotesPlayed" /> {answer}{' '}
|
|
</Text>
|
|
<Text>
|
|
{' '}
|
|
<Translate translationKey="longestCombo" /> {answer}{' '}
|
|
</Text>
|
|
<Text>
|
|
{' '}
|
|
<Translate translationKey="favoriteGenre" /> {answer}{' '}
|
|
</Text>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const ProfilePictureBannerAndLevel = () => {
|
|
const profilePic = 'https://wallpaperaccess.com/full/317501.jpg';
|
|
const username = 'Username';
|
|
const level = '1';
|
|
|
|
// banner size
|
|
const dimensions = Dimensions.get('window');
|
|
const imageHeight = dimensions.height / 5;
|
|
const imageWidth = dimensions.width;
|
|
|
|
// need to change the padding for the username and level
|
|
|
|
return (
|
|
<View style={{ flexDirection: 'row' }}>
|
|
<Image
|
|
source={{ uri: 'https://wallpaperaccess.com/full/317501.jpg' }}
|
|
size="lg"
|
|
style={{ height: imageHeight, width: imageWidth, zIndex: 0, opacity: 0.5 }}
|
|
/>
|
|
<Box zIndex={1} position={'absolute'} marginY={10} marginX={10}>
|
|
<Image
|
|
borderRadius={100}
|
|
source={{ uri: profilePic }}
|
|
alt="Profile picture"
|
|
size="lg"
|
|
style={{ position: 'absolute' }}
|
|
/>
|
|
<Box w="100%" paddingY={3} paddingLeft={100}>
|
|
<Heading>{username}</Heading>
|
|
<Heading>Level : {level}</Heading>
|
|
</Box>
|
|
</Box>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const ProfileView = () => {
|
|
const navigation = useNavigation();
|
|
|
|
return (
|
|
<View style={{ flexDirection: 'column' }}>
|
|
<ProfilePictureBannerAndLevel />
|
|
<UserMedals />
|
|
<PlayerStats />
|
|
<Box w="10%" paddingY={10} paddingLeft={5} paddingRight={50} zIndex={1}>
|
|
<TextButton
|
|
onPress={() => navigation.navigate('Settings', { screen: 'Profile' })}
|
|
translate={{ translationKey: 'settingsBtn' }}
|
|
/>
|
|
</Box>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default ProfileView;
|