/
index.tsx
40 lines (37 loc) · 1.07 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React from "react";
import { Box } from "@chakra-ui/react";
import { ThemedSiderV2 as DefaultSider } from "./sider";
import { ThemedHeaderV2 as DefaultHeader } from "./header";
import { RefineThemedLayoutV2Props } from "./types";
import { ThemedLayoutContextProvider } from "../../contexts";
export const ThemedLayoutV2: React.FC<RefineThemedLayoutV2Props> = ({
Sider,
Header,
Title,
Footer,
OffLayoutArea,
children,
initialSiderCollapsed,
}) => {
const SiderToRender = Sider ?? DefaultSider;
const HeaderToRender = Header ?? DefaultHeader;
return (
<ThemedLayoutContextProvider initialSiderCollapsed={initialSiderCollapsed}>
<Box display="flex">
<SiderToRender Title={Title} />
<Box
display="flex"
flexDirection="column"
flex={1}
minH="100vh"
overflow="clip"
>
<HeaderToRender />
<Box p={[2, 4]}>{children}</Box>
{Footer && <Footer />}
</Box>
{OffLayoutArea && <OffLayoutArea />}
</Box>
</ThemedLayoutContextProvider>
);
};