Web-Frontend/client/src/App.jsx

import { useState } from 'react'
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() {
  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}>
        <Canvas />
      </GridItem> 
    </Grid>
  );
}

export default App