45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import React, {FC, FormEvent, ReactNode} from "react"
|
|
import ReactDOM from "react-dom"
|
|
|
|
export const Modal: FC<ModalProps> = ({children, show, closeModal, ...props}) => {
|
|
|
|
const stopEvent = (event: FormEvent) => {
|
|
event.stopPropagation()
|
|
event.preventDefault()
|
|
}
|
|
|
|
return show && <Overlay onClick={closeModal}>
|
|
<div className="cursor-auto bg-white dark:bg-gray-900 dark:text-white"
|
|
onClick={stopEvent}
|
|
{...props}>
|
|
{children}
|
|
</div>
|
|
</Overlay>
|
|
}
|
|
|
|
interface ModalProps {
|
|
children: ReactNode,
|
|
show: boolean,
|
|
closeModal: () => void
|
|
}
|
|
|
|
const Overlay: FC<OverlayProps> = ({children, ...props}) => {
|
|
|
|
const app = document.getElementById('app')
|
|
|
|
if (app) {
|
|
return ReactDOM.createPortal(
|
|
<button className={"fixed inset-0 z-10 flex w-full items-center justify-center bg-gray-900/50"}
|
|
{...props}>
|
|
{children}
|
|
</button>,
|
|
app
|
|
)
|
|
}
|
|
}
|
|
|
|
interface OverlayProps {
|
|
children: ReactNode,
|
|
onClick: () => void
|
|
}
|