75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
import clsx from "clsx";
|
|
|
|
import CloseIcon from "@dndbeyond/fontawesome-cache/svgs/solid/x.svg";
|
|
|
|
import { Button } from "../Button";
|
|
import { Dialog, DialogProps } from "../Dialog";
|
|
import { MaxCharactersMessageText } from "../MaxCharactersMessageText";
|
|
import styles from "./styles.module.css";
|
|
|
|
interface MaxCharactersDialogProps
|
|
extends Omit<DialogProps, "onClose" | "open"> {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
useMyCharactersLink?: boolean;
|
|
hasLockedCharacters?: boolean;
|
|
}
|
|
|
|
export const MaxCharactersDialog: React.FC<MaxCharactersDialogProps> = ({
|
|
open,
|
|
onClose,
|
|
useMyCharactersLink,
|
|
hasLockedCharacters,
|
|
className,
|
|
...props
|
|
}) => {
|
|
return (
|
|
<Dialog
|
|
className={clsx([styles.dialog, className])}
|
|
open={open}
|
|
onClose={onClose}
|
|
modal
|
|
{...props}
|
|
>
|
|
<header className={styles.header}>
|
|
<h2 className={styles.title}>Your character slots are full</h2>
|
|
<Button
|
|
className={styles.closeButton}
|
|
variant="tool"
|
|
onClick={onClose}
|
|
aria-label="Close Modal"
|
|
>
|
|
<CloseIcon />
|
|
</Button>
|
|
</header>
|
|
<div className={styles.content}>
|
|
<MaxCharactersMessageText
|
|
hasLockedCharacters={hasLockedCharacters}
|
|
useMyCharactersLink={useMyCharactersLink}
|
|
/>
|
|
</div>
|
|
<footer className={styles.footer}>
|
|
{!hasLockedCharacters && (
|
|
<Button
|
|
className={styles.cardButton}
|
|
href="/store/subscribe"
|
|
color="info"
|
|
size="x-small"
|
|
variant="outline"
|
|
>
|
|
Subscribe
|
|
</Button>
|
|
)}
|
|
<Button
|
|
className={styles.cardButton}
|
|
color="info"
|
|
size="x-small"
|
|
onClick={onClose}
|
|
>
|
|
Close
|
|
</Button>
|
|
</footer>
|
|
</Dialog>
|
|
);
|
|
};
|