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
--- a/components/Dialog/dialog.module.css
+++ b/components/Dialog/dialog.module.css
@@ -0,0 +1,65 @@
+@keyframes modal-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.overlay {
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  height: var(--visual-viewport-height);
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100vw;
+  z-index: 100;
+
+  &[data-entering] {
+    animation: modal-fade 200ms;
+  }
+
+  &[data-exiting] {
+    animation: modal-fade 150ms reverse ease-in;
+  }
+}
+
+.modal {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+  max-width: 560px;
+  padding: var(--Spacing-x5) var(--Spacing-x4);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.footer {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--Spacing-x1);
+}
+
+@media screen and (min-width: 768px) {
+  .footer {
+    align-items: center;
+    flex-direction: row;
+    gap: var(--Spacing-x2);
+
+    & > button {
+      flex: 1;
+    }
+  }
+}
--- a/components/Dialog/index.tsx
+++ b/components/Dialog/index.tsx
@@ -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>
+  )
+}