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

import { Box, Heading, Center, Menu, Portal, Flex } from '@chakra-ui/react'
// import AddWidgetMenu from './AddWidgetMenu';

export default function FirstWidgetButton() {

    return (
        <Menu.Root positioning={{ placement: "right-start" }} >
            <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="alert level">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>

        // <Box
        //     p={6}
        //     m={4}
        //     borderRadius="md" 
        //     boxShadow="md"
        //     border="2px dashed"
        //     borderColor="gray.300"
        //     bg="gray.50"
        //     textAlign="center"
        //     cursor="pointer"
        //     _hover = {{
        //         bg: "gray.100",
        //         borderColor: "gray.400",
        //         boxShadow: "lg",
        //     }}
        //     transition="all 0.2s ease-in-out"
        // >
        //     {/* <AddWidgetMenu /> */}
        //     <Heading fontWeight="bold" fontSize="xl" color="gray.700">
        //         Add First Widget
        //     </Heading>
        // </Box>
    );
}