88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
"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>
|
|
)
|
|
}
|