47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
|
import classNames from 'classnames'
|
||
|
|
import { ReactNode } from 'react'
|
||
|
|
|
||
|
|
import Card from 'components/Card'
|
||
|
|
import CloseIcon from 'components/Icons/close.svg'
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
children?: ReactNode | string
|
||
|
|
content?: ReactNode | string
|
||
|
|
className?: string
|
||
|
|
open: boolean
|
||
|
|
setOpen: (open: boolean) => void
|
||
|
|
}
|
||
|
|
|
||
|
|
const Modal = ({ children, content, className, open, setOpen }: Props) => {
|
||
|
|
const onClickAway = () => {
|
||
|
|
setOpen(false)
|
||
|
|
}
|
||
|
|
|
||
|
|
return open ? (
|
||
|
|
<>
|
||
|
|
<Card
|
||
|
|
className={classNames(
|
||
|
|
'absolute top-0 left-0 right-0 bottom-0 z-40 mx-auto my-0 w-[790px] max-w-full',
|
||
|
|
className,
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<span
|
||
|
|
className='absolute top-4 right-4 w-[32px] opacity-40 hover:cursor-pointer hover:opacity-80'
|
||
|
|
onClick={onClickAway}
|
||
|
|
role='button'
|
||
|
|
>
|
||
|
|
<CloseIcon />
|
||
|
|
</span>
|
||
|
|
{children ? children : content}
|
||
|
|
</Card>
|
||
|
|
<div
|
||
|
|
className='fixed top-0 left-0 z-30 block h-full w-full bg-black/70 backdrop-blur hover:cursor-pointer'
|
||
|
|
onClick={onClickAway}
|
||
|
|
role='button'
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
) : null
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Modal
|