zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Front: Pretty and Lint (#225)

Browse Source
This commit is contained in:
Arthur Jamet
2023-06-17 07:01:23 +01:00
committed by GitHub
parent 399c7d0d9e
commit c5d465df97
94 changed files with 3627 additions and 3089 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/views/ProfileView.tsx
+112 -81
View File
@@ -1,100 +1,131 @@
import React from 'react';
import { Dimensions, View } from 'react-native';
import { Box, Image, Heading, HStack, Card, Button, Spacer, Text } from 'native-base';
import { Box, Image, Heading, HStack, Card, Text } from 'native-base';
import Translate from '../components/Translate';
import { useNavigation } from "../Navigation";
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>
);
}
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";
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>
);
}
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"
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;
// 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
// 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'}}
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>
);
}
<Box w="100%" paddingY={3} paddingLeft={100}>
<Heading>{username}</Heading>
<Heading>Level : {level}</Heading>
</Box>
</Box>
</View>
);
};
const ProfileView = () => {
const navigation = useNavigation();
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>
);
}
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;
export default ProfileView;