import { XIcon } from '@heroicons/react/outline'
import React, { ReactNode, useRef } from 'react'
import { useClickAway, useKey, useKeyPress, useKeyPressEvent } from 'react-use'
import Button from './Button'
export interface ModalProps {
show: boolean
children?: ReactNode
onClose?: () => void
title: string
className?: string
}
export default function Modal(props: ModalProps) {
const { show, children, onClose, className, title } = props
const ref = useRef(null)
useClickAway(ref, () => {
if (show) {
onClose?.()
})
useKeyPressEvent('Escape', e => {
return (
<div
className="modal-mask"
style={{ visibility: show === true ? 'visible' : 'hidden' }}
>
<div ref={ref} className={`modal ${className}`}>
<div className="modal-header">
<h2>{title}</h2>
<Button icon={<XIcon />} onClick={onClose} />
</div>
{children}
)