New source found from dndbeyond.com

2026-07-08 01:00:09 -07:00
parent 9a983a6d7b
commit dcefa0d2f2
2865 changed files with 222467 additions and 49053 deletions
@@ -0,0 +1,108 @@
+import clsx from "clsx";
+import { FC, useEffect, useState } from "react";
+
+import ChevronIcon from "@dndbeyond/fontawesome-cache/svgs/solid/chevron-right.svg";
+import CloseIcon from "@dndbeyond/fontawesome-cache/svgs/solid/x.svg";
+
+import { Button } from "~/components/Button";
+import { Dialog, DialogProps } from "~/components/Dialog";
+import characterGalleryImg from "~/images/character-gallery.png";
+import characterSheetImg from "~/images/character-sheet.png";
+import tadaEmoji from "~/images/tada-emoji.svg?url";
+
+import styles from "./styles.module.css";
+
+export interface ClaimConfirmationDialogProps
+  extends Omit<DialogProps, "onClose" | "open"> {
+  characterId: number;
+  campaignId?: number | null;
+}
+
+export const ClaimConfirmationDialog: FC<ClaimConfirmationDialogProps> = ({
+  className,
+  characterId,
+  campaignId,
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const handleClose = () => {
+    window.location.href = `/characters/${characterId}`;
+  };
+
+  useEffect(() => {
+    if (characterId) setIsOpen(true);
+  }, [characterId]);
+
+  return (
+    <Dialog
+      className={clsx([styles.dialog, className])}
+      open={isOpen}
+      onClose={handleClose}
+      modal
+      {...props}
+    >
+      <header className={styles.header}>
+        <h2 className={styles.title}>
+          <img src={tadaEmoji} alt="Ta-da Emoji" />
+          Congratulations!
+        </h2>
+        <Button
+          className={styles.closeButton}
+          variant="tool"
+          onClick={handleClose}
+          aria-label="Close Modal"
+        >
+          <CloseIcon />
+        </Button>
+      </header>
+      <div className={styles.content}>
+        <p className={styles.text}>
+          Your character has been claimed and is now available:
+        </p>
+        <div className={styles.card}>
+          <img
+            className={styles.cardImage}
+            src={characterGalleryImg}
+            alt="Premade character gallery"
+          />
+          <Button
+            className={styles.cardButton}
+            href="/characters"
+            color="primary"
+            size="x-small"
+          >
+            Go to My Characters <ChevronIcon />
+          </Button>
+        </div>
+        <div className={styles.card}>
+          <img
+            className={styles.cardImage}
+            src={characterSheetImg}
+            alt="Sample character sheet"
+          />
+          <Button
+            className={styles.cardButton}
+            href={`/characters/${characterId}`}
+            color="info"
+            size="x-small"
+          >
+            View Your Character <ChevronIcon />
+          </Button>
+        </div>
+      </div>
+      <footer className={styles.footer}>
+        {campaignId && (
+          <Button
+            href={`/campaigns/${campaignId}`}
+            variant="text"
+            color="info"
+            size="small"
+          >
+            or return to your campaign
+          </Button>
+        )}
+      </footer>
+    </Dialog>
+  );
+};