Connect Alert Level widget creation to First Widget Button

client/src/components/Canvas/CanvasComponents/FirstWidgetButton.jsx

@@ -1,10 +1,10 @@
 import { Box, Heading, Center, Menu, Portal, Flex } from '@chakra-ui/react'
+import AlertLevel from './AlertLevelWidget'
 // import AddWidgetMenu from './AddWidgetMenu';
 
-export default function FirstWidgetButton() {
+export default function FirstWidgetButton({ appendWidget }) {
-
     return (
-        <Menu.Root positioning={{ placement: "right-start" }} >
+        <Menu.Root positioning={{ placement: "bottom-middle" }} >
             <Menu.Trigger asChild>
                 <Box
                     p={6}
@@ -32,7 +32,12 @@ export default function FirstWidgetButton() {
             <Portal>
                 <Menu.Positioner>
                     <Menu.Content>
-                        <Menu.Item value="alert level">Alert Level</Menu.Item>
+                        <Menu.Item 
+                            value="AlertLevel" 
+                            onClick={() => appendWidget(AlertLevel, 3, 6, 3, 6, 3, 6)}
+                        >
+                            Alert Level
+                        </Menu.Item>
                         <Menu.Item value="co2">CO2</Menu.Item>
                         <Menu.Item value="ivans">IVANS</Menu.Item>
                         <Menu.Item value="plume heights">Plume Heights</Menu.Item>
@@ -41,28 +46,5 @@ export default function FirstWidgetButton() {
                 </Menu.Positioner>
             </Portal>
         </Menu.Root>
-
-        // <Box
-        //     p={6}
-        //     m={4}
-        //     borderRadius="md" 
-        //     boxShadow="md"
-        //     border="2px dashed"
-        //     borderColor="gray.300"
-        //     bg="gray.50"
-        //     textAlign="center"
-        //     cursor="pointer"
-        //     _hover = {{
-        //         bg: "gray.100",
-        //         borderColor: "gray.400",
-        //         boxShadow: "lg",
-        //     }}
-        //     transition="all 0.2s ease-in-out"
-        // >
-        //     {/* <AddWidgetMenu /> */}
-        //     <Heading fontWeight="bold" fontSize="xl" color="gray.700">
-        //         Add First Widget
-        //     </Heading>
-        // </Box>
     );
 }

client/src/components/Canvas/views/Home.jsx

@@ -11,7 +11,6 @@ import { SaveButton } from "../CanvasComponents/SaveButton";
 import DeleteAllButton from "../CanvasComponents/DeleteAllButton";
 import { v4 as uuid } from 'uuid';
 
-
 export default function Home({...props}) {
   // deconstructing props
   const { view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel, 
@@ -99,7 +98,7 @@ export default function Home({...props}) {
   }
 
   // Prop Forwarding
-  const MyDashboardProps = { layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray };
+  const MyDashboardProps = { layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray, appendWidget };
   const settingsButtonProps = { onEditWidgets, onDeleteWidgets, appendWidget };
   
   return (

client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx

@@ -3,7 +3,7 @@ import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
 import CustomResizeHandle from '../../CanvasComponents/CustomResizeHandle';
 import FirstWidgetButton from '../../CanvasComponents/FirstWidgetButton';
 
-export default function MyDashboard({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray}) {
+export default function MyDashboard({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray, appendWidget}) {
   console.log("rendering MyDashboard");
   const recipe = useSlotRecipe({ key: "widget" });
   const styles = recipe(); // using root recipe for widget below
@@ -36,7 +36,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
         bg="gray.150"
         borderRadius="md"
       >
-        <FirstWidgetButton />  
+        <FirstWidgetButton appendWidget={ appendWidget } />  
       </Flex>
     );
   }
@@ -63,7 +63,7 @@ export default function MyDashboard({layout, onLayoutChange, isEditable, isDelet
             const Widget = item.widget;
             return (
               <Flex key={item.i} css={styles.root} boxShadow="md" height="100%" >
-                <Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}/>
+                <Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget} appendWidget={appendWidget}/>
               </Flex>
             );
           })