Refactor: moved Widget and CanvasHeader code into Canvas.jsx to handle both as a parent element

client/src/App.jsx

@@ -1,15 +1,34 @@
 import { useState } from 'react'
 import Header from './components/layout/Header/Header.jsx';
 import Sidebar from './components/layout/Sidebar/Sidebar.jsx';
-import Widget from './components/layout/Canvas/Widget.jsx'
-import { Grid, GridItem, useRecipe } from "@chakra-ui/react"
-import CanvasHeader from './components/layout/Canvas/CanvasHeader.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"
@@ -24,19 +43,19 @@ function App() {
         <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>
+      {/* <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>
   );