50 lines
1.9 KiB
React
50 lines
1.9 KiB
React
import { Box, Heading, Center, Menu, Portal, Flex } from '@chakra-ui/react'
|
|
import AlertLevel from './AlertLevelWidget'
|
|
// import AddWidgetMenu from './AddWidgetMenu';
|
|
|
|
export default function FirstWidgetButton({ appendWidget }) {
|
|
return (
|
|
<Menu.Root positioning={{ placement: "bottom-middle" }} >
|
|
<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="AlertLevel"
|
|
onClick={() => appendWidget(AlertLevel, 3, 6, 3, 6, 3, 6)}
|
|
>
|
|
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>
|
|
);
|
|
} |