48 lines
1.1 KiB
React
48 lines
1.1 KiB
React
import { useState } from 'react'
|
|
import Header from './components/header.jsx';
|
|
import Sidebar from './components/sidebar.jsx';
|
|
import Widget from './components/Widget.jsx'
|
|
import { Grid, GridItem, useRecipe } from "@chakra-ui/react"
|
|
import CanvasHeader from './components/CanvasHeader.jsx'
|
|
|
|
|
|
function App() {
|
|
const recipe = useRecipe({ key: "canvas" });
|
|
const styles = recipe();
|
|
|
|
return (
|
|
<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}>
|
|
<Grid
|
|
templateRows="repeat(12, 1fr)"
|
|
templateColumns="repeat(4, 1fr)"
|
|
height="100%"
|
|
width="100%"
|
|
>
|
|
<GridItem colSpan={4} rowSpan={1}>
|
|
<CanvasHeader />
|
|
</GridItem>
|
|
<GridItem colSpan={4} rowSpan={5}>
|
|
<Widget />
|
|
</GridItem>
|
|
</Grid>
|
|
</GridItem>
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
export default App
|
|
|
|
|