Web-Frontend/client/src/App.jsx

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