Web-Frontend/client/src/components/Canvas/CanvasComponents/SettingsButton.jsx

import { IconButton, Menu, Portal } from "@chakra-ui/react";
import { FiSettings } from "react-icons/fi";
import AddWidgetMenu from "./AddWidgetMenu";

export function SettingsButton({ onEditWidgets, onDeleteWidgets, appendWidget}) {  
  const addWidgetMenuProps = { appendWidget }
  return (
    <Menu.Root>
      <Menu.Trigger asChild >
          <IconButton variant="ghost" size="md" borderRadius="xl">
            <FiSettings />
          </IconButton>
      </Menu.Trigger>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <AddWidgetMenu {...addWidgetMenuProps}/>
            <Menu.Item onClick={onEditWidgets} value ="editwidget">Edit Widgets</Menu.Item>
            <Menu.Item 
              onClick={onDeleteWidgets}
              color="fg.error"
              _hover={{ bg: "bg.error", color: "fg.error "}}
            >
              Delete Widgets
            </Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  );
}