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

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

export default function AddWidgetMenu({appendWidget}) {
  return (
    <Menu.Root>
      <Menu.TriggerItem>
        <IoIosArrowBack /> Add Widget
      </Menu.TriggerItem>
      <Portal>
        <Menu.Positioner>
          <Menu.Content>
            <Menu.Item 
              value="AlertLevel" 
              onClick={() => appendWidget(AlertLevel, 4, 7, 4, 7, 4, 7)}  // width and height are passed through here for each widget
            >
              Alert Level
            </Menu.Item>
            <Menu.Item>
              CO2
            </Menu.Item>
            <Menu.Item>
              IVANS
            </Menu.Item>
            <Menu.Item>
              Plume Heights
            </Menu.Item>
            <Menu.Item>
              Alert Level Changes
            </Menu.Item>
          </Menu.Content>
        </Menu.Positioner>
      </Portal>
    </Menu.Root>
  )
}