Spaces:
Running
Running
File size: 2,601 Bytes
d092f57 ce09e2f d092f57 ce09e2f d092f57 ce09e2f d092f57 ce09e2f d092f57 ce09e2f d092f57 ce09e2f d092f57 ce09e2f d092f57 ce09e2f d092f57 ce09e2f 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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | 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/60 backdrop-blur-sm"}
/>
<div className={"flex justify-center h-full items-center p-4"}>
<div className={"relative bg-dark-800 shadow-2xl rounded-xl z-50 min-w-[30%] max-w-2xl w-full border border-dark-700/50"}>
<div
className={
"flex justify-between items-center p-4 border-b border-dark-700/50"
}
>
<div className={"px-2"}>
<h2 className={"text-xl font-semibold text-primary-400"}>{title}</h2>
</div>
<Button
tooltip={"Close modal"}
id={"closeModal1"}
onClick={close}
actionClasses={"hover:bg-dark-700 active:bg-dark-600"}
>
<IconClose />
</Button>
</div>
<div className={"p-6"}>{children}</div>
<div
className={
"flex justify-end items-center p-4 border-t border-dark-700/50"
}
>
<Button
tooltip={"Close modal"}
id={"closeModal2"}
className={"px-4 py-2"}
actionClasses={"bg-dark-700 hover:bg-dark-600 active:bg-dark-500"}
onClick={close}
>
Close
</Button>
</div>
</div>
</div>
<Tooltip
anchorId={"closeModal1"}
style={{
backgroundColor: "var(--dark-700)",
borderRadius: "0.5rem",
padding: "0.5rem 0.75rem",
fontSize: "0.875rem",
}}
/>
<Tooltip
anchorId={"closeModal2"}
style={{
backgroundColor: "var(--dark-700)",
borderRadius: "0.5rem",
padding: "0.5rem 0.75rem",
fontSize: "0.875rem",
}}
/>
</div>
)
}
export default Modal
|