feat: add discard changes modal to profile edit

2024-08-26 12:39:13 +02:00
parent 23f7be912e
commit d46a7ecbf7
12 changed files with 268 additions and 168 deletions
@@ -0,0 +1,87 @@
+"use client"
+import {
+  Dialog as AriaDialog,
+  DialogTrigger,
+  Modal,
+  ModalOverlay,
+} from "react-aria-components"
+
+import LoadingSpinner from "@/components/LoadingSpinner"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./dialog.module.css"
+
+import type { DialogProps } from "@/types/components/dialog"
+
+export default function Dialog({
+  bodyText,
+  cancelButtonText,
+  proceedHref,
+  proceedIsPending = false,
+  proceedOnClick = () => {},
+  proceedText,
+  titleText,
+  triggerButtonText,
+}: DialogProps) {
+  return (
+    <DialogTrigger>
+      <Button intent="secondary" size="small" theme="base">
+        {triggerButtonText}
+      </Button>
+      <ModalOverlay className={styles.overlay} isDismissable>
+        <Modal>
+          <AriaDialog role="alertdialog">
+            {({ close }) => (
+              <section className={styles.modal}>
+                <header className={styles.header}>
+                  <Subtitle textAlign="center">{titleText}</Subtitle>
+                  <Body textAlign="center">{bodyText}</Body>
+                </header>
+                {proceedIsPending ? (
+                  <LoadingSpinner />
+                ) : (
+                  <footer className={styles.footer}>
+                    <Button
+                      intent="secondary"
+                      onPress={close}
+                      size="medium"
+                      theme="base"
+                    >
+                      {cancelButtonText}
+                    </Button>
+                    {proceedHref ? (
+                      <Button
+                        asChild
+                        intent="primary"
+                        size="medium"
+                        theme="base"
+                      >
+                        <Link color="none" href={proceedHref}>
+                          {proceedText}
+                        </Link>
+                      </Button>
+                    ) : (
+                      <Button
+                        intent="primary"
+                        onPress={() => {
+                          proceedOnClick(close)
+                        }}
+                        size="medium"
+                        theme="base"
+                      >
+                        {proceedText}
+                      </Button>
+                    )}
+                  </footer>
+                )}
+              </section>
+            )}
+          </AriaDialog>
+        </Modal>
+      </ModalOverlay>
+    </DialogTrigger>
+  )
+}