82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
import { Button, ButtonProps } from "../../Button"
|
|
import { IconButton } from "../../IconButton"
|
|
import { Typography } from "../../Typography"
|
|
|
|
import styles from "./modalContent.module.css"
|
|
|
|
import type { ReactNode } from "react"
|
|
|
|
interface ModalContentProps {
|
|
title?: string
|
|
content: ReactNode
|
|
primaryAction:
|
|
| (Pick<
|
|
ButtonProps,
|
|
"onPress" | "variant" | "isPending" | "isDisabled" | "type"
|
|
> & {
|
|
label: string
|
|
})
|
|
| null
|
|
secondaryAction:
|
|
| (Pick<ButtonProps, "onPress" | "variant"> & {
|
|
label: string
|
|
})
|
|
| null
|
|
onClose?: () => void
|
|
}
|
|
|
|
export function ModalContentWithActions({
|
|
title,
|
|
content,
|
|
primaryAction,
|
|
secondaryAction,
|
|
onClose,
|
|
}: ModalContentProps) {
|
|
const intl = useIntl()
|
|
return (
|
|
<>
|
|
{title && (
|
|
<header className={styles.header}>
|
|
<Typography variant="Title/Subtitle/md">
|
|
<p>{title}</p>
|
|
</Typography>
|
|
<IconButton
|
|
variant="Muted"
|
|
emphasis
|
|
onPress={onClose}
|
|
type="button"
|
|
className={styles.close}
|
|
iconName="close"
|
|
aria-label={intl.formatMessage({
|
|
id: "common.close",
|
|
defaultMessage: "Close",
|
|
})}
|
|
/>
|
|
</header>
|
|
)}
|
|
<div className={styles.content}>{content}</div>
|
|
<footer className={styles.footer}>
|
|
{secondaryAction && (
|
|
<Button
|
|
variant={secondaryAction.variant ?? "Text"}
|
|
onPress={secondaryAction.onPress}
|
|
>
|
|
{secondaryAction.label}
|
|
</Button>
|
|
)}
|
|
{primaryAction && (
|
|
<Button
|
|
variant={primaryAction.variant ?? "Secondary"}
|
|
onPress={primaryAction.onPress}
|
|
isPending={primaryAction.isPending}
|
|
isDisabled={primaryAction.isDisabled}
|
|
>
|
|
{primaryAction.label}
|
|
</Button>
|
|
)}
|
|
</footer>
|
|
</>
|
|
)
|
|
}
|