File size: 1,920 Bytes
d092f57 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | import Button from "../action/Button"
import { FC, ReactNode } from "react"
import IconClose from "../icon/IconClose"
import { Tooltip } from "react-tooltip"
interface Props {
title: ReactNode
show: boolean
close: () => void
children?: ReactNode
}
const Modal: FC<Props> = ({ title, show, close, children }) => {
if (!show) {
return <></>
}
return (
<div className={"absolute top-0 left-0 h-full w-full z-40"}>
<div
onMouseDownCapture={(e) => {
e.preventDefault()
e.stopPropagation()
close()
}}
onTouchStartCapture={(e) => {
e.preventDefault()
e.stopPropagation()
close()
}}
className={"absolute top-0 left-0 h-full w-full bg-black/50"}
/>
<div className={"flex justify-center h-full items-center"}>
<div className={"relative bg-dark-800 shadow rounded z-50 min-w-[30%]"}>
<div
className={
"flex justify-between items-center p-2 border-b-2 border-b-dark-1000"
}
>
<div className={"p-2 mr-2"}>
<h2 className={"text-xl"}>{title}</h2>
</div>
<Button tooltip={"Close modal"} id={"closeModal1"} onClick={close}>
<IconClose />
</Button>
</div>
<div className={"p-4"}>{children}</div>
<div
className={
"flex justify-end items-center p-2 border-t-2 border-t-dark-1000"
}
>
<Button
tooltip={"Close modal"}
id={"closeModal2"}
className={"p-2 bg-dark-600"}
onClick={close}
>
Close
</Button>
</div>
</div>
</div>
<Tooltip anchorId={"closeModal1"} />
<Tooltip anchorId={"closeModal2"} />
</div>
)
}
export default Modal
|