now can delete widgets

client/src/components/layout/Canvas/views/DashboardCanvasNav/WidgetCanvas.jsx

@@ -7,7 +7,8 @@ import GridLayout, { WidthProvider } from 'react-grid-layout';
 import Widget from '../../components/Widget.jsx';
 import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
 
-export default function WidgetCanvas({layout, onLayoutChange}) {
+export default function WidgetCanvas({layout, onLayoutChange, isEditable, isDelete, DeleteWidget}) {
+  console.log("rendering widgetcanvas");
     // Define widgets initial position and size
     // TODO Add dynamic adding/deleting of widgets via options button 
     const recipe = useSlotRecipe({ key: "widget" });
@@ -24,26 +25,26 @@ export default function WidgetCanvas({layout, onLayoutChange}) {
     };
 
     return (
-        <chakra.div width="100%">
-            <ResponsiveGridLayout
-              className="layout"
-              layout={layout}
-              cols={12} // Total columns in grid
-              rowHeight={30} //Height of a single row in px
-              isBounded={true} // Total width of the grid
-              margin={[10, 10]} // [horizontal, vertical] gap
-              onLayoutChange={onLayoutChange}
-              draggableHandle=".widget-handle" // Make only the header draggable
-              onDragStart={handleDragStart}
-              onDragStop={handleDragStop}
-            >
-                {layout.map((item) => (
-                    // this flex wrapper allows the widget to shrink down to the header size, no less
-                    <Flex key={item.i} css={styles.root} height="100%" >
-                        <Widget title="VDAP Widget" />
-                    </Flex>
-                ))}
-            </ResponsiveGridLayout>
-        </chakra.div>
-    );
+      <chakra.div width="100%">
+        <ResponsiveGridLayout
+          className="layout"
+          layout={layout}
+          cols={12} // Total columns in grid
+          rowHeight={30} //Height of a single row in px
+          isBounded={true} // Total width of the grid
+          margin={[10, 10]} // [horizontal, vertical] gap
+          onLayoutChange={onLayoutChange}
+          draggableHandle=".widget-handle" // Make only the header draggable
+          onDragStart={handleDragStart}
+          onDragStop={handleDragStop}
+        >
+          {layout.map((item) => (
+              // this flex wrapper allows the widget to shrink down to the header size, no less
+              <Flex key={item.i} css={styles.root} height="100%" >
+                  <Widget id={item.i} title="VDAP Widget" isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}/>
+              </Flex>
+          ))}
+        </ResponsiveGridLayout>
+    </chakra.div>
+  );
 }