57 lines
1.7 KiB
React
57 lines
1.7 KiB
React
import { Box, Menu, Portal } from '@chakra-ui/react'
|
|
import AlertLevel from "@/components/Widgets/AlertLevelWidget.jsx";
|
|
|
|
export default function FirstWidgetButton({ 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="gray.50"
|
|
cursor="pointer"
|
|
_hover = {{
|
|
bg: "gray.100",
|
|
borderColor: "gray.400",
|
|
boxShadow: "lg",
|
|
}}
|
|
>
|
|
Add Your First Widget
|
|
</Box>
|
|
</Menu.Trigger>
|
|
</>
|
|
);
|
|
const positioning = { placement: "bottom-middle" };
|
|
// const WidgetMenuProps = { appendWidget, triggerItem, positioning };
|
|
return (
|
|
// <WidgetMenu {...WidgetMenuProps} />
|
|
<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>
|
|
);
|
|
} |