69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
import useTabActive from '@/hooks/use-tab-active';
|
|
import { PageContainer } from '@ant-design/pro-components';
|
|
import { useIntl } from '@umijs/max';
|
|
import { TabsProps } from 'antd';
|
|
import React, { useCallback, useState } from 'react';
|
|
import styled from 'styled-components';
|
|
import CustomUI from './components/custom-ui';
|
|
import ModifyPasswordn from './components/modify-password';
|
|
|
|
const Wrapper = styled.div`
|
|
.ant-page-header-heading {
|
|
padding-inline: 8px;
|
|
}
|
|
`;
|
|
|
|
const Profile: React.FC = () => {
|
|
const intl = useIntl();
|
|
const { setTabActive, getTabActive, tabsMap } = useTabActive();
|
|
const [activeKey, setActiveKey] = useState(
|
|
getTabActive(tabsMap.userSettings) || 'modify-password'
|
|
);
|
|
|
|
const items: TabsProps['items'] = [
|
|
{
|
|
key: 'modify-password',
|
|
label: intl.formatMessage({ id: 'users.form.updatepassword' }),
|
|
children: <ModifyPasswordn />
|
|
},
|
|
{
|
|
key: 'custom-ui',
|
|
label: 'Custom UI',
|
|
children: <CustomUI />
|
|
}
|
|
];
|
|
|
|
const handleChangeTab = useCallback((key: string) => {
|
|
setActiveKey(key);
|
|
setTabActive(tabsMap.userSettings, key);
|
|
}, []);
|
|
|
|
return (
|
|
<Wrapper>
|
|
<PageContainer
|
|
ghost
|
|
header={{
|
|
title: 'User Settings',
|
|
style: {
|
|
paddingInline: 'var(--layout-content-inlinepadding)'
|
|
}
|
|
}}
|
|
tabList={items}
|
|
onTabChange={handleChangeTab}
|
|
tabActiveKey={activeKey}
|
|
tabProps={{
|
|
type: 'card',
|
|
style: {
|
|
marginTop: 78
|
|
}
|
|
}}
|
|
extra={[]}
|
|
></PageContainer>
|
|
</Wrapper>
|
|
);
|
|
};
|
|
|
|
Profile.displayName = 'Profile';
|
|
|
|
export default Profile;
|