widget menu refactoring

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

@@ -1,50 +1,36 @@
-import { Box, Heading, Center, Menu, Portal, Flex } from '@chakra-ui/react'
+import { Box, Menu, Portal } from '@chakra-ui/react'
-import AlertLevel from './AlertLevelWidget'
+import WidgetMenu from './WidgetMenu';
-// import AddWidgetMenu from './AddWidgetMenu';
 
 export default function FirstWidgetButton({ appendWidget }) {
-    return (
+  const triggerItem = (<>
-        <Menu.Root positioning={{ placement: "bottom-middle" }} >
+    <Menu.Trigger asChild>
-            <Menu.Trigger asChild>
+      <Box
-                <Box
+        p={6}
-                    p={6}
+        m="auto"
-                    m="auto"
+        mt={6}
-                    mt={6}
+        align="center"
-                    align="center"
+        textAlign="center"
-                    textAlign="center"
+        justify="center"
-                    justify="center"
+        width="400px"
-                    width="400px"
+        borderRadius="md" 
-                    borderRadius="md" 
+        boxShadow="md"
-                    boxShadow="md"
+        border="2px dashed"
-                    border="2px dashed"
+        borderColor="gray.300"
-                    borderColor="gray.300"
+        bg="gray.50"
-                    bg="gray.50"
+        cursor="pointer"
-                    cursor="pointer"
+        _hover = {{
-                    _hover = {{
+          bg: "gray.100",
-                        bg: "gray.100",
+          borderColor: "gray.400",
-                        borderColor: "gray.400",
+          boxShadow: "lg",
-                        boxShadow: "lg",
+        }}
-                    }}
+      >
-                >
+        Add Your First Widget
-                    Add First Widget
+      </Box>
-                </Box>
+    </Menu.Trigger>
-            </Menu.Trigger>
+  </>);
-            <Portal>
+  const positioning = { placement: "bottom-middle" };
-                <Menu.Positioner>
+  const WidgetMenuProps = { appendWidget, triggerItem, positioning };
-                    <Menu.Content>
+  return (
-                        <Menu.Item 
+    <WidgetMenu {...WidgetMenuProps} />
-                            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>
-                        <Menu.Item value="alert level changes">Alert Level Changes</Menu.Item>
-                    </Menu.Content>
-                </Menu.Positioner>
-            </Portal>
-        </Menu.Root>
-    );
 }

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

@@ -1,9 +1,11 @@
 import { IconButton, Menu, Portal } from "@chakra-ui/react";
+import { IoIosArrowBack } from "react-icons/io";
 import { FiSettings } from "react-icons/fi";
-import AddWidgetMenu from "./AddWidgetMenu";
+import WidgetMenu from "./WidgetMenu";
 
 export function SettingsButton({ onEditWidgets, onDeleteWidgets, appendWidget}) {  
-  const addWidgetMenuProps = { appendWidget }
+  const triggerItem = (<> <Menu.TriggerItem> <IoIosArrowBack /> Add Widget</Menu.TriggerItem> </>);
+  const WidgetMenuProps = { appendWidget, triggerItem }
   return (
     <Menu.Root>
       <Menu.Trigger asChild >
@@ -14,7 +16,7 @@ export function SettingsButton({ onEditWidgets, onDeleteWidgets, appendWidget})
       <Portal>
         <Menu.Positioner>
           <Menu.Content>
-            <AddWidgetMenu {...addWidgetMenuProps}/>
+            <WidgetMenu {...WidgetMenuProps}/>
             <Menu.Item onClick={onEditWidgets} value ="editwidget">Edit Widgets</Menu.Item>
             <Menu.Item 
               onClick={onDeleteWidgets}

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

@@ -1,13 +1,10 @@
-import { IoIosArrowBack } from "react-icons/io";
 import { Menu, Portal } from "@chakra-ui/react";
 import AlertLevel from "./AlertLevelWidget";
 
-export default function AddWidgetMenu({appendWidget}) {
+export default function WidgetMenu({appendWidget, triggerItem, positioning}) {
   return (
-    <Menu.Root>
+    <Menu.Root positioning={positioning}>
-      <Menu.TriggerItem>
+      {triggerItem}
-        <IoIosArrowBack /> Add Widget
-      </Menu.TriggerItem>
       <Portal>
         <Menu.Positioner>
           <Menu.Content>
@@ -17,18 +14,10 @@ export default function AddWidgetMenu({appendWidget}) {
             >
               Alert Level
             </Menu.Item>
-            <Menu.Item>
+            <Menu.Item value="co2">CO2</Menu.Item>
-              CO2
+            <Menu.Item value="ivans">IVANS</Menu.Item>
-            </Menu.Item>
+            <Menu.Item value="plume heights">Plume Heights</Menu.Item>
-            <Menu.Item>
+            <Menu.Item value="alert level changes">Alert Level Changes</Menu.Item>
-              IVANS
-            </Menu.Item>
-            <Menu.Item>
-              Plume Heights
-            </Menu.Item>
-            <Menu.Item>
-              Alert Level Changes
-            </Menu.Item>
           </Menu.Content>
         </Menu.Positioner>
       </Portal>