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

import { Dialog, Portal, CloseButton, Button } from "@chakra-ui/react";

export default function DialogPopup({dialog}) {
  console.log("3. dialog popup")
  return(
    <Dialog.RootProvider value={dialog}>
      <Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content>
            <Dialog.Header>
              <Dialog.Title>Leave Your Changes Behind?</Dialog.Title>
            </Dialog.Header>
            <Dialog.Body>
              <p>
                Click 'No' to go back and save your changes before navigating away from MyDashboard.
              </p>
            </Dialog.Body>
            <Dialog.Footer>
              <Dialog.ActionTrigger asChild>
                <Button variant="outline">No</Button>
              </Dialog.ActionTrigger>
              <Button bg="red.500">Yes</Button>
            </Dialog.Footer>
            <Dialog.CloseTrigger asChild>
              <CloseButton size="sm" />
            </Dialog.CloseTrigger>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.RootProvider>
  );
}