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

import { Menu, Portal } from "@chakra-ui/react";
import AlertLevel from "./AlertLevelWidget";

export default function WidgetMenu({appendWidget, triggerItem, positioning}) {
  return (
    <Menu.Root positioning={positioning}>
      {triggerItem}
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item 
              value="AlertLevel" 
              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 8, 14)}  // width and height are passed through here for each widget
            >
              Alert Level
            </Menu.Item>
            <Menu.Item value="CO2">CO2</Menu.Item>
            <Menu.Item value="Ivans">IVANS</Menu.Item>
            <Menu.Item value="PlumeHeights">Plume Heights</Menu.Item>
            <Menu.Item value="AlertLevelChanges">Alert Level Changes</Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}