mirror of
https://github.com/towfiqi/serpbear
synced 2025-06-26 18:15:54 +00:00
4a47cedad8
- Replaces useEffet with useMemo & useLayoutEffect where necessary. - Converts some useEffects to separate hooks. - Moves the functions defined within components to utils. - Splits the Keywords renderPosition function to its own component.
39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import Icon from './Icon';
|
|
import useOnKey from '../../hooks/useOnKey';
|
|
|
|
type ModalProps = {
|
|
children: React.ReactNode,
|
|
width?: string,
|
|
title?: string,
|
|
closeModal: Function,
|
|
}
|
|
|
|
const Modal = ({ children, width = '1/2', closeModal, title }:ModalProps) => {
|
|
useOnKey('Escape', closeModal);
|
|
|
|
const closeOnBGClick = (e:React.SyntheticEvent) => {
|
|
e.stopPropagation();
|
|
e.nativeEvent.stopImmediatePropagation();
|
|
if (e.target === e.currentTarget) { closeModal(); }
|
|
};
|
|
|
|
return (
|
|
<div className='modal fixed top-0 left-0 bg-white/[.7] w-full h-screen z-50' onClick={closeOnBGClick}>
|
|
<div
|
|
className={`modal__content max-w-[340px] absolute top-1/4 left-0 right-0 ml-auto mr-auto w-${width}
|
|
lg:max-w-md bg-white shadow-md rounded-md p-5 border-t-[1px] border-gray-100 text-base`}>
|
|
{title && <h3 className=' font-semibold mb-3'>{title}</h3>}
|
|
<button
|
|
className='modal-close absolute right-2 top-2 p-2 cursor-pointer text-gray-400 transition-all
|
|
hover:text-gray-700 hover:rotate-90' onClick={() => closeModal()}>
|
|
<Icon type="close" size={18} />
|
|
</button>
|
|
<div>{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Modal;
|