You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
1.1 KiB
JavaScript
32 lines
1.1 KiB
JavaScript
import { Outlet, useNavigate } from 'react-router-dom';
|
|
import { Layout, Flex, theme, Spin, Divider } from 'antd';
|
|
import BackBtn from './BackBtn';
|
|
|
|
const { Content, Header } = Layout;
|
|
const HeaderWrapper = ({ children, header, loading, backTo, ...props }) => {
|
|
const navigate = useNavigate();
|
|
const {
|
|
token: { colorBgContainer },
|
|
} = theme.useToken();
|
|
return (
|
|
<>
|
|
<Spin spinning={loading || false} wrapperClassName='h-full [&_.ant-spin-container]:h-full' >
|
|
<Layout className=' bg-white h-full'>
|
|
<Header className='header px-6 h-10 ' style={{ background: 'white' }}>
|
|
<Flex justify={'space-between'} align={'center'} className='h-full'>
|
|
{/* {header} */}
|
|
<div className='grow h-full'>{header}</div>
|
|
{backTo!==false && <BackBtn to={backTo} />}
|
|
</Flex>
|
|
</Header>
|
|
<Divider className='my-2' />
|
|
<Content className='overflow-auto' style={{ backgroundColor: colorBgContainer }}>
|
|
{children || <Outlet />}
|
|
</Content>
|
|
</Layout>
|
|
</Spin>
|
|
</>
|
|
);
|
|
};
|
|
export default HeaderWrapper;
|