109 lines
2.9 KiB
TypeScript
109 lines
2.9 KiB
TypeScript
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>
|
|
);
|
|
};
|