perf: scroll page code
This commit is contained in:
@@ -61,72 +61,81 @@ const Team = () => {
|
||||
|
||||
return (
|
||||
<AccountContainer isLoading={isLoading}>
|
||||
{/* header */}
|
||||
<Flex
|
||||
w={'100%'}
|
||||
h={'3.5rem'}
|
||||
px={'1.56rem'}
|
||||
py={'0.56rem'}
|
||||
borderBottom={'1px solid'}
|
||||
borderColor={'myGray.200'}
|
||||
bg={'myGray.25'}
|
||||
align={'center'}
|
||||
gap={6}
|
||||
justify={'space-between'}
|
||||
>
|
||||
<Flex align={'center'}>
|
||||
<Flex gap={2} color={'myGray.900'}>
|
||||
<Icon name="support/user/usersLight" w={'1.25rem'} h={'1.25rem'} />
|
||||
<Box fontWeight={'500'} fontSize={'1rem'}>
|
||||
{t('account:team')}
|
||||
</Box>
|
||||
</Flex>
|
||||
<Flex align={'center'} ml={6}>
|
||||
<TeamSelector height={'28px'} />
|
||||
</Flex>
|
||||
{userInfo?.team?.role === TeamMemberRoleEnum.owner && (
|
||||
<Flex align={'center'} justify={'center'} ml={2} p={'0.44rem'}>
|
||||
<MyIcon
|
||||
name="edit"
|
||||
w="18px"
|
||||
cursor="pointer"
|
||||
_hover={{
|
||||
color: 'primary.500'
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!userInfo?.team) return;
|
||||
setEditTeamData({
|
||||
id: userInfo.team.teamId,
|
||||
name: userInfo.team.teamName,
|
||||
avatar: userInfo.team.avatar
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Flex h={'100%'} flexDirection={'column'}>
|
||||
{/* header */}
|
||||
<Flex
|
||||
w={'100%'}
|
||||
h={'3.5rem'}
|
||||
px={'1.56rem'}
|
||||
py={'0.56rem'}
|
||||
borderBottom={'1px solid'}
|
||||
borderColor={'myGray.200'}
|
||||
bg={'myGray.25'}
|
||||
align={'center'}
|
||||
gap={6}
|
||||
justify={'space-between'}
|
||||
>
|
||||
<Flex align={'center'}>
|
||||
<Flex gap={2} color={'myGray.900'}>
|
||||
<Icon name="support/user/usersLight" w={'1.25rem'} h={'1.25rem'} />
|
||||
<Box fontWeight={'500'} fontSize={'1rem'}>
|
||||
{t('account:team')}
|
||||
</Box>
|
||||
</Flex>
|
||||
)}
|
||||
<Flex align={'center'} ml={6}>
|
||||
<TeamSelector height={'28px'} />
|
||||
</Flex>
|
||||
{userInfo?.team?.role === TeamMemberRoleEnum.owner && (
|
||||
<Flex align={'center'} justify={'center'} ml={2} p={'0.44rem'}>
|
||||
<MyIcon
|
||||
name="edit"
|
||||
w="18px"
|
||||
cursor="pointer"
|
||||
_hover={{
|
||||
color: 'primary.500'
|
||||
}}
|
||||
onClick={() => {
|
||||
if (!userInfo?.team) return;
|
||||
setEditTeamData({
|
||||
id: userInfo.team.teamId,
|
||||
name: userInfo.team.teamName,
|
||||
avatar: userInfo.team.avatar
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
<Box
|
||||
float={'right'}
|
||||
color={'myGray.900'}
|
||||
h={'1.25rem'}
|
||||
px={'0.5rem'}
|
||||
py={'0.125rem'}
|
||||
fontSize={'0.75rem'}
|
||||
borderRadius={'1.25rem'}
|
||||
bg={'myGray.150'}
|
||||
>
|
||||
{t('account_team:total_team_members', { amount: teamSize })}
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
{/* table */}
|
||||
<Box
|
||||
float={'right'}
|
||||
color={'myGray.900'}
|
||||
h={'1.25rem'}
|
||||
px={'0.5rem'}
|
||||
py={'0.125rem'}
|
||||
fontSize={'0.75rem'}
|
||||
borderRadius={'1.25rem'}
|
||||
bg={'myGray.150'}
|
||||
py={'1.5rem'}
|
||||
px={'2rem'}
|
||||
flex={'1 0 0'}
|
||||
display={'flex'}
|
||||
flexDirection={'column'}
|
||||
overflow={'auto'}
|
||||
>
|
||||
{t('account_team:total_team_members', { amount: teamSize })}
|
||||
{teamTab === TeamTabEnum.member && <MemberTable Tabs={Tabs} />}
|
||||
{teamTab === TeamTabEnum.org && <OrgManage Tabs={Tabs} />}
|
||||
{teamTab === TeamTabEnum.group && <GroupManage Tabs={Tabs} />}
|
||||
{teamTab === TeamTabEnum.permission && <PermissionManage Tabs={Tabs} />}
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
{/* table */}
|
||||
<Box py={'1.5rem'} px={'2rem'}>
|
||||
{teamTab === TeamTabEnum.member && <MemberTable Tabs={Tabs} />}
|
||||
{teamTab === TeamTabEnum.org && <OrgManage Tabs={Tabs} />}
|
||||
{teamTab === TeamTabEnum.group && <GroupManage Tabs={Tabs} />}
|
||||
{teamTab === TeamTabEnum.permission && <PermissionManage Tabs={Tabs} />}
|
||||
</Box>
|
||||
</AccountContainer>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user