80 lines
2.4 KiB
React
80 lines
2.4 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 } from '@chakra-ui/react';
|
|
import { useState } from 'react';
|
|
|
|
export default function Dashboard() {
|
|
const recipe = useRecipe({ key: "canvas" });
|
|
const styles = recipe();
|
|
|
|
// Lifted State - defaults to widget dashboard
|
|
const [view, setView] = useState("widget");
|
|
const [layout, setLayout] = useState([
|
|
{ i: '0', x: 0, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true },
|
|
{ i: '1', x: 3, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true },
|
|
{ i: '2', x: 6, y: 0, w: 3, h: 3, minH: 3, minW: 1, static: true }
|
|
]);
|
|
|
|
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: absolute;
|
|
bottom: 0;
|
|
z-index: 1;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: thin; /* Firefox */
|
|
scrollbar-color: #a0aec0 transparent; /* Firefox */
|
|
}
|
|
|
|
/* Chrome, Edge, Safari */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: rgba(100, 100, 100, 0.4);
|
|
border-radius: 4px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
`}
|
|
/>
|
|
<Grid css={styles}
|
|
templateRows="1fr 11fr"
|
|
templateColumns="1fr 20fr"
|
|
height="100vh"
|
|
width="100vw"
|
|
>
|
|
<GridItem rowSpan={1} colSpan={2}>
|
|
<Header />
|
|
</GridItem>
|
|
<GridItem colSpan={1}>
|
|
<Sidebar onChangeView={ setView }/>
|
|
</GridItem>
|
|
<GridItem colSpan={1} width="100%" overflow="auto">
|
|
<Canvas
|
|
view={ view }
|
|
layout={ layout }
|
|
setLayout={ setLayout }
|
|
onLayoutChange={( newLayout ) => setLayout( newLayout )}
|
|
/>
|
|
</GridItem>
|
|
</Grid>
|
|
</>
|
|
);
|
|
} |