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';

// REMOVE AFTER TESTING
import CanvasHeader from './components/layout/Canvas/CanvasHeader.jsx';
import { GridLayout } from 'react-grid-layout';


function App() {
  const recipe = useRecipe({ key: "canvas" });
  const styles = recipe();

  // TEST TEST TEST
//   return (
//     <Box>
//       <Canvas /> {/* ← This should render something visible */}
//       {/* <GridLayout>
//         {layout.map((item) => (
//           <div key={item.i}>
//             <Widget title="VDAP Widget" />
//           </div>
//         ))}
//       </GridLayout> */}
//     </Box>
//   );
// }
  

  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={1}>
          <Canvas />
        </GridItem> 
        {/* <GridItem colSpan={4} rowSpan={5}>
          <Canvas />
        </GridItem> */}
      {/* </Grid> */}
      </GridItem>
    </Grid>
  );
}

export default App