76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
import React from 'react'
|
|
import { Portal } from 'react-portal'
|
|
import { XIcon } from '@heroicons/react/solid'
|
|
|
|
const Modal: any = React.forwardRef<any, any>((props, ref) => {
|
|
const {
|
|
isOpen,
|
|
onClose,
|
|
children,
|
|
hideClose = false,
|
|
noPadding = false,
|
|
alignTop = false,
|
|
className = '',
|
|
} = props
|
|
|
|
return (
|
|
<Portal>
|
|
<div
|
|
className="fixed inset-0 z-40 overflow-y-auto"
|
|
aria-labelledby="modal-title"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
>
|
|
<div className="flex min-h-screen items-center text-center sm:block sm:p-0">
|
|
{isOpen ? (
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
|
|
aria-hidden="true"
|
|
onClick={onClose}
|
|
></div>
|
|
) : null}
|
|
|
|
{alignTop ? null : (
|
|
<span
|
|
className="hidden sm:inline-block sm:h-screen sm:align-middle"
|
|
aria-hidden="true"
|
|
>
|
|
​
|
|
</span>
|
|
)}
|
|
|
|
{isOpen ? (
|
|
<div
|
|
className={`inline-block min-h-screen border border-th-bkg-3 bg-th-bkg-1 text-left
|
|
sm:min-h-full sm:rounded-lg ${
|
|
noPadding ? '' : 'px-8 pt-6 pb-6'
|
|
} w-full transform align-middle shadow-lg transition-all sm:max-w-md ${className}`}
|
|
ref={ref}
|
|
>
|
|
{!hideClose ? (
|
|
<div className="">
|
|
<button
|
|
onClick={onClose}
|
|
className={`absolute right-4 top-4 text-th-fgd-4 focus:outline-none md:right-2 md:top-2 md:hover:text-th-primary`}
|
|
>
|
|
<XIcon className={`h-5 w-5`} />
|
|
</button>
|
|
</div>
|
|
) : null}
|
|
{children}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</Portal>
|
|
)
|
|
})
|
|
|
|
const Header = ({ children }) => {
|
|
return <div className={`flex flex-col items-center pb-2`}>{children}</div>
|
|
}
|
|
|
|
Modal.Header = Header
|
|
|
|
export default Modal
|