Skip to content
Snippets Groups Projects

feat: add modal

Merged Adrian Orłów requested to merge feature/add-modal into development
All threads resolved!
import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
import { useAppSelector } from '@/redux/hooks/useAppSelector';
import { modalSelector } from '@/redux/modal/modal.selector';
import { closeModal } from '@/redux/modal/modal.slice';
import { Icon } from '@/shared/Icon';
import { twMerge } from 'tailwind-merge';
import { MODAL_ROLE } from './Modal.constants';
import { OverviewImagesModal } from './OverviewImagesModal';
export const Modal = (): React.ReactNode => {
const dispatch = useAppDispatch();
const { isOpen, modalName, modalTitle } = useAppSelector(modalSelector);
const handleCloseModal = (): void => {
dispatch(closeModal());
};
return (
<div
className={twMerge(
'absolute left-0 top-0 z-10 h-full w-full bg-cetacean-blue/[.48]',
isOpen ? '' : 'hidden',
)}
role={MODAL_ROLE}
>
<div className="flex h-full w-full items-center justify-center">
<div className="flex h-5/6 w-10/12 flex-col overflow-hidden rounded-lg">
<div className="flex items-center justify-between bg-white p-[24px] text-xl">
<div>{modalTitle}</div>
<button type="button" onClick={handleCloseModal} aria-label="close button">
<Icon name="close" className="fill-font-500" />
</button>
</div>
+1
{isOpen && modalName === 'overview-images' && <OverviewImagesModal />}
</div>
</div>
</div>
);
};
Loading