App/src/caj/tabs/main/AccountTab.tsx

74 lines
1.9 KiB
TypeScript

import AccountInfoBanner, {
MyUserAccountInfoBanner,
} from '@caj/components/userUI/AccountInfoBanner';
import NotLoggedIn from '@caj/components/NotLoggedIn';
import {ThemeMode} from '@caj/configs/appVar';
import {defaultHeaderStyle} from '@caj/configs/colors';
import {RootStackNavigatorParamList} from '@caj/Navigation';
import {RootState} from '@caj/redux/store';
import {
createNativeStackNavigator,
NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import {Box, Center, Container, Text} from 'native-base';
import {useSelector} from 'react-redux';
export const AccountTabName = 'Account';
export type AccountStackNavigatorParamList = {
Overview: undefined;
};
const AccountStack =
createNativeStackNavigator<AccountStackNavigatorParamList>();
export type AccountScreenNavigationProp =
NativeStackNavigationProp<AccountStackNavigatorParamList>;
function AccountTab() {
const lang = useSelector((state: RootState) => state.appVariables.lang);
const theme = useSelector(
(state: RootState) => state.appVariables.preferences.theme,
);
return (
<AccountStack.Navigator>
<AccountStack.Screen
name="Overview"
options={{
animation: 'slide_from_left',
title: lang.navigation.home.account,
headerShown: true,
...defaultHeaderStyle(theme),
}}
component={AccountScreen}
/>
</AccountStack.Navigator>
);
}
function AccountScreen() {
const theme = useSelector(
(state: RootState) => state.appVariables.preferences.theme,
);
return (
<>
<Box
bg="blackBG.400"
{...(theme === ThemeMode.Darkest
? {borderBottomWidth: 1, borderColor: 'white.900'}
: {})}
style={{
width: '100%',
paddingVertical: 20,
borderBottomLeftRadius: 20,
}}>
<MyUserAccountInfoBanner />
</Box>
<NotLoggedIn />
</>
);
}
export default AccountTab;