Dialog popup works

2025-08-12 09:55:57 -07:00
parent f8c9a0cc0b
commit f85c64e7f0
2 changed files with 41 additions and 8 deletions
@@ -0,0 +1,33 @@
+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="tomato">Yes</Button>
+            </Dialog.Footer>
+            <Dialog.CloseTrigger asChild>
+              <CloseButton size="sm" />
+            </Dialog.CloseTrigger>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.RootProvider>
+  );
+}