mirror of
https://github.com/towfiqi/serpbear
synced 2025-06-26 18:15:54 +00:00
f04b10cf6b
- Adds the ability to add domain specific Search Console API Info through the Domain Settings panel. - Adds the ability to add global Search Console API Info through the App Settings Panel. - Adds better Search Console Error logging. - Changes the App Settings Sidebar UI. - Changers the Domain Settings Modal UI. - Replaces html Input field with custom InputField component. - Adds a new /domain api route to get the full domain info which includes the domain level Search console API. closes #59, #146
41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import Icon from './Icon';
|
|
import useOnKey from '../../hooks/useOnKey';
|
|
|
|
type ModalProps = {
|
|
children: React.ReactNode,
|
|
width?: string,
|
|
title?: string,
|
|
verticalCenter?: boolean,
|
|
closeModal: Function,
|
|
}
|
|
|
|
const Modal = ({ children, width = '1/2', closeModal, title, verticalCenter = false }: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 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
|
|
${verticalCenter ? ' top-1/2 translate-y-[-50%]' : 'top-1/4'}`}>
|
|
{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;
|