widget menu refactoring

2025-08-11 14:02:58 -07:00
parent 03942a422e
commit 9ad6e3b799
3 changed files with 45 additions and 68 deletions
@@ -1,50 +1,36 @@
-import { Box, Heading, Center, Menu, Portal, Flex } from '@chakra-ui/react'
-import AlertLevel from './AlertLevelWidget'
-// import AddWidgetMenu from './AddWidgetMenu';
+import { Box, Menu, Portal } from '@chakra-ui/react'
+import WidgetMenu from './WidgetMenu';

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