GHHub/src/components/SecondHeaderWrapper.jsx

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, ...props }) => {
  const navigate = useNavigate();
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <>
      <Layout className=' bg-white'>
        <Spin spinning={loading || false}>
        <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>
            <BackBtn />
          </Flex>
        </Header>
        <hr />
        <Content className='' style={{ backgroundColor: colorBgContainer }}>
          {children || <Outlet />}
        </Content>
        </Spin>
      </Layout>
    </>
  );
};
export default HeaderWrapper;