hamid zarghami
57 lines
2.2 KiB
TypeScript
57 lines
2.2 KiB
TypeScript
import { FC, Fragment, ReactNode, useEffect } from 'react'
|
|
import HeaderModal from './HeaderModal'
|
|
|
|
interface Props {
|
|
open: boolean,
|
|
close: () => void,
|
|
children: ReactNode,
|
|
isHeader?: boolean,
|
|
title_header?: string,
|
|
width?: number
|
|
}
|
|
|
|
const DefaulModal: FC<Props> = (props: Props) => {
|
|
|
|
useEffect(() => {
|
|
if (props.open) {
|
|
document.body.style.overflow = 'hidden'
|
|
} else {
|
|
document.body.style.overflow = 'auto'
|
|
}
|
|
}, [props.open])
|
|
|
|
|
|
return (
|
|
<Fragment>
|
|
{
|
|
props.open && (
|
|
<Fragment>
|
|
<div style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end flex overflow-x-hidden overflow-y-auto fixed inset-0 z-[60] h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto'>
|
|
<div className='relative xl:h-full max-h-[80%] bottom-0 left-0 flex xl:items-center sm:h-auto w-full xl:my-6 xl:p-2'>
|
|
<div className='border-0 h-auto p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full modalGlass2 outline-none focus:outline-none max-h-[85%]'>
|
|
|
|
|
|
{
|
|
props.isHeader && props.title_header &&
|
|
<div onClick={props.close} className='pb-6 border-b border-white border-opacity-20'>
|
|
<div className='h-[5px] w-[200px] mx-auto bg-[#D1D3D7] rounded-full mb-4 xl:hidden'></div>
|
|
<HeaderModal close={props.close} label={props.title_header} />
|
|
</div>
|
|
}
|
|
|
|
{props.children}
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div onClick={props.close} className='fixed size-full top-0 bottom-0 right-0 modalGlass inset-0 z-50 '></div>
|
|
</Fragment>
|
|
)
|
|
}
|
|
</Fragment>
|
|
)
|
|
}
|
|
|
|
export default DefaulModal |