35 lines
1015 B
TypeScript
35 lines
1015 B
TypeScript
import React from 'react';
|
|
import { translate } from '../i18n/i18n';
|
|
import { Box, Text, VStack, Progress, Stack } from 'native-base';
|
|
import { useNavigation } from '../Navigation';
|
|
import Card from '../components/Card';
|
|
import UserAvatar from './UserAvatar';
|
|
|
|
const ProgressBar = ({ xp }: { xp: number }) => {
|
|
const level = Math.floor(xp / 1000);
|
|
const nextLevel = level + 1;
|
|
const nextLevelThreshold = nextLevel * 1000;
|
|
const progessValue = (100 * xp) / nextLevelThreshold;
|
|
|
|
const nav = useNavigation();
|
|
|
|
return (
|
|
<Card w="100%" onPress={() => nav.navigate('User')}>
|
|
<Stack padding={4} space={2} direction="row" alignItems="center">
|
|
<UserAvatar />
|
|
<VStack alignItems={'center'} flexGrow={1} space={2}>
|
|
<Text>{`${translate('level')} ${level}`}</Text>
|
|
<Box w="100%">
|
|
<Progress value={progessValue} mx="4" />
|
|
</Box>
|
|
<Text>
|
|
{xp} / {nextLevelThreshold} {translate('levelProgress')}
|
|
</Text>
|
|
</VStack>
|
|
</Stack>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default ProgressBar;
|