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>
     );
 }