chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Dashboard parent component to Header, Siderbar, Canvas in order to faciliate lifting state

Browse Source
This commit is contained in:
Daniel S. Hansen
2025-07-23 11:01:25 -07:00
parent caeed48d19
commit b432c8a8ec
2 changed files with 52 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.jsx
+2 -43
View File
@@ -1,49 +1,8 @@
import { Global, css } from "@emotion/react"; import Dashboard from './components/layout/Dashboard.jsx'
import Header from './components/layout/Header/Header.jsx';
import Sidebar from './components/layout/Sidebar/Sidebar.jsx';
import Canvas from './components/layout/Canvas/Canvas.jsx';
import { Grid, GridItem, useRecipe, Box } from '@chakra-ui/react';
function App() { function App() {
const recipe = useRecipe({ key: "canvas" });
const styles = recipe();
return ( return (
<> <Dashboard />
<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>
</>
); );
} }
client/src/components/layout/Dashboard.jsx
+50
View File
@@ -0,0 +1,50 @@
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>
</>
);
}