2023-07-30 01:09:10 +02:00
|
|
|
import { AppShell, clsx, useMantineTheme } from '@mantine/core';
|
|
|
|
|
import { useConfigContext } from '~/config/provider';
|
2023-07-29 20:56:08 +02:00
|
|
|
|
2023-07-30 01:09:10 +02:00
|
|
|
import { Background } from './Background';
|
|
|
|
|
import { Head } from './Meta/Head';
|
2023-07-29 20:56:08 +02:00
|
|
|
import { MainHeader } from './new-header/Header';
|
|
|
|
|
|
|
|
|
|
type MainLayoutProps = {
|
2023-07-30 01:09:10 +02:00
|
|
|
headerActions?: React.ReactNode;
|
2023-07-29 20:56:08 +02:00
|
|
|
children: React.ReactNode;
|
|
|
|
|
};
|
|
|
|
|
|
2023-07-30 01:09:10 +02:00
|
|
|
export const MainLayout = ({ headerActions, children }: MainLayoutProps) => {
|
|
|
|
|
const { config } = useConfigContext();
|
2023-07-29 20:56:08 +02:00
|
|
|
const theme = useMantineTheme();
|
2023-07-30 01:09:10 +02:00
|
|
|
|
2023-07-29 20:56:08 +02:00
|
|
|
return (
|
|
|
|
|
<AppShell
|
|
|
|
|
styles={{
|
|
|
|
|
root: {
|
|
|
|
|
background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
|
|
|
|
|
},
|
|
|
|
|
}}
|
2023-07-30 01:09:10 +02:00
|
|
|
header={<MainHeader headerActions={headerActions} />}
|
|
|
|
|
className="dashboard-app-shell"
|
2023-07-29 20:56:08 +02:00
|
|
|
>
|
2023-07-30 01:09:10 +02:00
|
|
|
<Head />
|
|
|
|
|
<Background />
|
2023-07-29 20:56:08 +02:00
|
|
|
{children}
|
2023-07-30 01:09:10 +02:00
|
|
|
<style>{clsx(config?.settings.customization.customCss)}</style>
|
2023-07-29 20:56:08 +02:00
|
|
|
</AppShell>
|
|
|
|
|
);
|
|
|
|
|
};
|
