87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
"use client"
|
|
import {
|
|
Dialog as AriaDialog,
|
|
DialogTrigger,
|
|
Modal,
|
|
ModalOverlay,
|
|
} from "react-aria-components"
|
|
|
|
import { Button } from "@scandic-hotels/design-system/Button"
|
|
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
|
|
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
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,
|
|
trigger,
|
|
}: DialogProps) {
|
|
return (
|
|
<DialogTrigger>
|
|
{trigger}
|
|
<ModalOverlay className={styles.overlay} isDismissable>
|
|
<Modal>
|
|
<AriaDialog role="alertdialog" className={styles.dialog}>
|
|
{({ close }) => (
|
|
<section className={styles.modal}>
|
|
<header className={styles.header}>
|
|
<Typography variant="Title/Subtitle/md">
|
|
<p>{titleText}</p>
|
|
</Typography>
|
|
<Typography>
|
|
<p>{bodyText}</p>
|
|
</Typography>
|
|
</header>
|
|
{proceedIsPending ? (
|
|
<LoadingSpinner />
|
|
) : (
|
|
<footer className={styles.footer}>
|
|
<Button
|
|
variant="Secondary"
|
|
onPress={close}
|
|
size="Medium"
|
|
color="Primary"
|
|
>
|
|
{cancelButtonText}
|
|
</Button>
|
|
{proceedHref ? (
|
|
<ButtonLink
|
|
variant="Primary"
|
|
color="Primary"
|
|
size="Medium"
|
|
href={proceedHref}
|
|
>
|
|
{proceedText}
|
|
</ButtonLink>
|
|
) : (
|
|
<Button
|
|
variant="Primary"
|
|
color="Primary"
|
|
onPress={() => {
|
|
proceedOnClick(close)
|
|
}}
|
|
size="Medium"
|
|
>
|
|
{proceedText}
|
|
</Button>
|
|
)}
|
|
</footer>
|
|
)}
|
|
</section>
|
|
)}
|
|
</AriaDialog>
|
|
</Modal>
|
|
</ModalOverlay>
|
|
</DialogTrigger>
|
|
)
|
|
}
|