51 lines
1.2 KiB
React
51 lines
1.2 KiB
React
|
import { Global, css } from "@emotion/react";
|
||
|
|
import Header from './Header/Header.jsx';
|
||
|
|
import Sidebar from './Sidebar/Sidebar.jsx';
|
||
|
|
import Canvas from './Canvas/Canvas.jsx';
|
||
|
|
import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react';
|
||
|
|
|
||
|
|
export default function Dashboard() {
|
||
|
|
const recipe = useRecipe({ key: "canvas" });
|
||
|
|
const styles = recipe();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Global // change the background color of widget shadow when moving
|
||
|
|
styles={css`
|
||
|
|
.react-grid-placeholder {
|
||
|
|
background: #c0d2e3ff !important;
|
||
|
|
border-color: #a9b6c2ff !important;
|
||
|
|
box-shadow: 0 0 10px #c0d2e3ff !important;
|
||
|
|
opacity: 1 !important;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.react-resizable-handle-se {
|
||
|
|
position: sticky;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
/>
|
||
|
|
<Grid css={styles}
|
||
|
|
templateRows="1fr 11fr"
|
||
|
|
templateColumns="1fr 20fr"
|
||
|
|
height="100vh"
|
||
|
|
width="100vw"
|
||
|
|
>
|
||
|
|
<GridItem rowSpan={1} colSpan={2}>
|
||
|
|
<Header />
|
||
|
|
</GridItem>
|
||
|
|
<GridItem colSpan={1}>
|
||
|
|
<Sidebar />
|
||
|
|
</GridItem>
|
||
|
|
<GridItem colSpan={1} width="100%">
|
||
|
|
<Canvas />
|
||
|
|
</GridItem>
|
||
|
|
</Grid>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
|