Add drop down menu to settings button

2025-07-14 12:10:10 -07:00
parent ebad1e792e
commit 1223ecc0b6
1 changed files with 43 additions and 14 deletions
@@ -1,21 +1,50 @@
-import { IconButton, Box } from "@chakra-ui/react";
+// This component displays a drop down menu when clicked, with custom functionality
+// for 'Add Widget', 'Edit Widgets', and 'Remove Widgets'. This component will 
+// control settings related to the Widgets on the main canvas. 
+
+import { Button, Menu, Portal } from "@chakra-ui/react";
 import { FiSettings } from "react-icons/fi";

 export function SettingsButton(props) {
+    const handleAddWidget = () => {
+        console.log("Add Widget clicked");
+        // TODO: Implement widget-adding logic
+    }
+
+    const handleEditWidgdets = () => {
+        console.log("Edit Widgets clicked")
+        // TODO: Implement widget-editing logic
+    }
+
+    const handleDeleteWidgets = () => {
+        console.log("Delete Widgets clicked");
+        // TODO: Implement widget-deletion logic
+    }
+    
    return (
-        <IconButton
-            aria-label="Settings"
-            size="sm"
-            variant="ghost"
-            color="gray.600"
-            _hover={{
-                bg: "gray.100",
-                color: "gray.800",
-            }}
-            {...props}
-        >
-            <FiSettings />
-        </IconButton>
+        // This uses Chakra's built in menu component
+        <Menu.Root>
+            <Menu.Trigger asChild>
+                <Button variant="ghost" size="md">
+                    <FiSettings />
+                </Button>
+            </Menu.Trigger>
+            <Portal>
+                <Menu.Positioner>
+                    <Menu.Content>
+                        <Menu.Item onClick={handleAddWidget} value="addwidget">Add Widget</Menu.Item>
+                        <Menu.Item onClick={handleEditWidgdets} value ="editwidget">Edit Widgets</Menu.Item>
+                        <Menu.Item 
+                            onClick={handleDeleteWidgets}
+                            color="fg.error"
+                            _hover={{ bg: "bg.error", color: "fg.error "}}
+                        >
+                            Delete Widgets
+                        </Menu.Item>
+                    </Menu.Content>
+                </Menu.Positioner>
+            </Portal>
+        </Menu.Root>
    );
 }