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

import { Box, Menu, Portal } from '@chakra-ui/react'
import WidgetMenu from './WidgetMenu';

export default function FirstWidgetButton({ view, appendWidget }) {
  const triggerItem = (<>
    <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={{base:"white",_dark:"gray"}}
        color={{base:"black",_dark:"white"}}
        cursor="pointer"
        _hover = {{
          bg: {base:"gray.100", _dark:"gray.600"},
          borderColor: "gray.400",
          boxShadow: "lg",
        }}
      >
        Add Your First Widget
      </Box>
    </Menu.Trigger>
  </>);
  const positioning = { placement: "bottom-middle" };
  const WidgetMenuProps = { view, appendWidget, triggerItem, positioning };
  return (
    <WidgetMenu {...WidgetMenuProps} />
  );
}