diff --git a/v3/src/components/graph/components/camera-menu-list.tsx b/v3/src/components/graph/components/camera-menu-list.tsx index c5f853505..639154bed 100644 --- a/v3/src/components/graph/components/camera-menu-list.tsx +++ b/v3/src/components/graph/components/camera-menu-list.tsx @@ -1,25 +1,51 @@ import React, { useState } from "react" -import { MenuItem, MenuList } from "@chakra-ui/react" +import { MenuItem, MenuList, useToast } from "@chakra-ui/react" import { t } from "../../../utilities/translation/translate" export const CameraMenuList = () => { const [hasBackgroundImage, setHasBackgroundImage] = useState(false) const [imageLocked, setImageLocked] = useState(false) + const toast = useToast() + const handleMenuItemClick = (menuItem: string) => { + toast({ + title: 'Menu item clicked', + description: `You clicked on ${menuItem}`, + status: 'success', + duration: 5000, + isClosable: true, + }) + } const handleAddBackgroundImage = () => { setHasBackgroundImage(true) + handleMenuItemClick("Add Background Image clicked") } const handleRemoveBackgroundImage = () => { setHasBackgroundImage(false) + handleMenuItemClick("Remove Background Image clicked") } const handleUnlockImage = () => { setImageLocked(false) + handleMenuItemClick("Unlock Image clicked") } const handleLockImage = () => { setImageLocked(true) + handleMenuItemClick("Lock Image clicked") + } + + const handleCopyImage = () => { + handleMenuItemClick("Copy Image clicked") + } + + const handleExportPNG = () => { + handleMenuItemClick("Export PNG Image clicked") + } + + const handleExportSVG = () => { + handleMenuItemClick("Export SVG Image clicked") } return ( @@ -42,9 +68,15 @@ export const CameraMenuList = () => { {t("DG.DataDisplayMenu.addBackgroundImage")} } - {t("DG.DataDisplayMenu.copyAsImage")} - {t("DG.DataDisplayMenu.exportPngImage")} - {t("DG.DataDisplayMenu.exportSvgImage")} + + {t("DG.DataDisplayMenu.copyAsImage")} + + + {t("DG.DataDisplayMenu.exportPngImage")} + + + {t("DG.DataDisplayMenu.exportSvgImage")} + ) }