42 lines
898 B
TypeScript
42 lines
898 B
TypeScript
import React, { ReactElement, ReactNode } from 'react'
|
|
import ReactModal from 'react-modal'
|
|
import styles from './index.module.css'
|
|
|
|
if (process.env.NODE_ENV !== 'test') ReactModal.setAppElement('#__next')
|
|
|
|
export interface ModalProps extends ReactModal.Props {
|
|
title: string
|
|
onToggleModal: () => void
|
|
children: ReactNode
|
|
}
|
|
|
|
export default function Modal({
|
|
title,
|
|
onToggleModal,
|
|
children,
|
|
...props
|
|
}: ModalProps): ReactElement {
|
|
return (
|
|
<ReactModal
|
|
contentLabel={title}
|
|
className={styles.modal}
|
|
overlayClassName={styles.modalOverlay}
|
|
{...props}
|
|
>
|
|
<button
|
|
className={styles.close}
|
|
onClick={onToggleModal}
|
|
data-testid="closeModal"
|
|
>
|
|
×
|
|
</button>
|
|
|
|
<header className={styles.header}>
|
|
<h2 className={styles.title}>{title}</h2>
|
|
</header>
|
|
|
|
{children}
|
|
</ReactModal>
|
|
)
|
|
}
|