profile
parent
9c1e4ff07e
commit
c0f0eeeb54
|
|
@ -6,10 +6,12 @@ import {
|
|||
themeSelector,
|
||||
} from '@caj/configs/colors';
|
||||
import {UserId} from '@caj/configs/types';
|
||||
import {RootState} from '@caj/redux/store';
|
||||
import MyUserManager from '@caj/user/MyUserManager';
|
||||
import {User} from '@caj/user/types';
|
||||
import UserManager from '@caj/user/UserManager';
|
||||
import {Box, Center, Skeleton, Text, VStack} from 'native-base';
|
||||
import {Box, Center, HStack, Skeleton, Text, VStack} from 'native-base';
|
||||
import {useSelector} from 'react-redux';
|
||||
|
||||
import {TextSkeleton} from '../simple/Skeleton';
|
||||
|
||||
|
|
@ -36,8 +38,12 @@ export default function AccountInfoBanner(props: {
|
|||
const theme = themeSelector();
|
||||
const _theme = themeNB(theme);
|
||||
|
||||
const height = 150;
|
||||
let boxHeight = height;
|
||||
const lang = useSelector((state: RootState) => state.appVariables.lang);
|
||||
|
||||
const spacing = 4;
|
||||
const size = 50;
|
||||
|
||||
let boxHeight = size * 3 + spacing * 2;
|
||||
|
||||
if (theme === ThemeMode.Darkest) {
|
||||
boxHeight += 2;
|
||||
|
|
@ -49,13 +55,13 @@ export default function AccountInfoBanner(props: {
|
|||
<Box
|
||||
bg={getBackgroundColor(theme)}
|
||||
{...darkThemeStyle(theme, 'black.500')}
|
||||
p={1}
|
||||
py={spacing + 'px'}
|
||||
pl={spacing + 'px'}
|
||||
ml={2}
|
||||
mb={10}
|
||||
style={{
|
||||
height: boxHeight,
|
||||
borderTopLeftRadius: height / 2,
|
||||
borderBottomLeftRadius: height / 2,
|
||||
borderTopLeftRadius: size + spacing,
|
||||
borderBottomLeftRadius: size / 4 + spacing,
|
||||
}}>
|
||||
{props.children}
|
||||
</Box>
|
||||
|
|
@ -68,46 +74,98 @@ export default function AccountInfoBanner(props: {
|
|||
|
||||
return (
|
||||
<Background>
|
||||
<VStack space={2}>
|
||||
<VStack space={spacing + 'px'}>
|
||||
<Box
|
||||
bg={'blackBG.400'}
|
||||
left={boxHeight / 2 - 25}
|
||||
pl={100}
|
||||
ml={size}
|
||||
pl={size * 1.2}
|
||||
pr={3}
|
||||
height={10}
|
||||
height={size}
|
||||
width={'85%'}
|
||||
borderRadius={25}
|
||||
borderRightRadius={size / 2}
|
||||
{...darkThemeStyle(theme, 'black.500')}>
|
||||
<TextSkeleton
|
||||
SkeletonProps={{lines: 1, width: '160px'}}
|
||||
color="primary.800"
|
||||
fontSize={14}>
|
||||
color="primary.400">
|
||||
{user.Username.data}
|
||||
</TextSkeleton>
|
||||
<TextSkeleton
|
||||
SkeletonProps={{lines: 1, width: '120px'}}
|
||||
color="white.100"
|
||||
margin={0}
|
||||
padding={0}
|
||||
fontSize={12}>
|
||||
padding={0}>
|
||||
{user.AccountName.data}
|
||||
</TextSkeleton>
|
||||
</Box>
|
||||
<HStack
|
||||
alignSelf={'stretch'}
|
||||
space={spacing + 'px'}
|
||||
mr={spacing + 'px'}>
|
||||
<HStack
|
||||
space={2}
|
||||
bg={'blackBG.400'}
|
||||
ml={size}
|
||||
pl={size * 1.2}
|
||||
pr={size / 2}
|
||||
alignSelf="baseline"
|
||||
height={size}
|
||||
borderRightRadius={size / 2}
|
||||
{...darkThemeStyle(theme, 'black.500')}>
|
||||
<VStack alignItems={'center'}>
|
||||
<TextSkeleton color="primary.400" SkeletonProps={{lines: 1}}>
|
||||
{user.FollowingCount.data}
|
||||
</TextSkeleton>
|
||||
<Text color="white.100">{lang.account.profile.follower}</Text>
|
||||
</VStack>
|
||||
<VStack alignItems={'center'}>
|
||||
<TextSkeleton color="primary.400" SkeletonProps={{lines: 1}}>
|
||||
{user.FollowersCount.data}
|
||||
</TextSkeleton>
|
||||
<Text color="white.100">{lang.account.profile.following}</Text>
|
||||
</VStack>
|
||||
</HStack>
|
||||
<Box
|
||||
flexGrow={1}
|
||||
backgroundColor={'primary.800'}
|
||||
borderRadius={size / 2}
|
||||
justifyContent="center">
|
||||
<TextSkeleton
|
||||
textAlign={'center'}
|
||||
color="#fff"
|
||||
SkeletonProps={{
|
||||
lines: 1,
|
||||
width: '20%',
|
||||
alignSelf: 'center',
|
||||
startColor: 'primary.200',
|
||||
}}>
|
||||
{user.FollowersCount.data === undefined
|
||||
? undefined
|
||||
: 'Lvl. ' + user.FollowersCount.data}
|
||||
</TextSkeleton>
|
||||
</Box>
|
||||
</HStack>
|
||||
|
||||
<Box
|
||||
bg={'blackBG.400'}
|
||||
left={boxHeight / 2 - 25}
|
||||
pl={100}
|
||||
height={10}
|
||||
width={'75%'}
|
||||
borderRadius={25}
|
||||
height={size}
|
||||
width={'100%'}
|
||||
borderLeftRadius={size / 4}
|
||||
{...darkThemeStyle(theme, 'black.500')}>
|
||||
<TextSkeleton SkeletonProps={{lines: 1}}>
|
||||
{user.FollowersCount.data} {' '} {user.FollowingCount.data}
|
||||
<TextSkeleton
|
||||
mx={spacing * 2 + 'px'}
|
||||
numberOfLines={2}
|
||||
SkeletonProps={{
|
||||
lines: 2,
|
||||
width: '80%',
|
||||
mx: spacing * 2 + 'px',
|
||||
}}
|
||||
color="white.100">
|
||||
{user.Description.data}
|
||||
</TextSkeleton>
|
||||
</Box>
|
||||
</VStack>
|
||||
<Box position={'absolute'} top={1} left={1}>
|
||||
<ProfilePic size={height - _theme.space[1] * 2} />
|
||||
<Box position={'absolute'} top={spacing + 'px'} left={spacing + 'px'}>
|
||||
<ProfilePic size={size * 2 + spacing} />
|
||||
</Box>
|
||||
</Background>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -162,6 +162,7 @@ export const theme = (_theme: ThemeMode) => {
|
|||
fontFamily: 'Outfit-Regular',
|
||||
colorScheme: 'black',
|
||||
},
|
||||
spaces:{},
|
||||
sizes: {
|
||||
xl: {
|
||||
fontSize: '64px',
|
||||
|
|
|
|||
|
|
@ -21,7 +21,10 @@ export default interface LangFormat {
|
|||
info: string;
|
||||
error: string;
|
||||
success: string;
|
||||
account: {
|
||||
account: {profile: {
|
||||
follower: string,
|
||||
following: string,
|
||||
},
|
||||
login: {
|
||||
title: string;
|
||||
wrongEmPw: string;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,10 @@ export const lang: LangFormat = {
|
|||
error: 'Error',
|
||||
success: 'Success',
|
||||
account: {
|
||||
profile: {
|
||||
follower: "Follower",
|
||||
following: "Following",
|
||||
},
|
||||
login: {
|
||||
title: 'Log in',
|
||||
wrongEmPw: 'Wrong E-Mail or password',
|
||||
|
|
|
|||
Loading…
Reference in New Issue