Feature/project info publications list submap select

Description

Introduced submap selector

How it works

• on select it triggers fetching publications
• it sets value in the store for selected modelId
• if any other action fires "fetchPublications" it's going to use modelId from the store

src/components/FunctionalArea/Modal/ModalLayout/ModalLayout.component.tsx

+import { twMerge } from 'tailwind-merge';
+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 { MODAL_ROLE } from './ModalLayout.constants';
+
+type ModalLayoutProps = {
+  children: React.ReactNode;
+};
+
+export const ModalLayout = ({ children }: ModalLayoutProps): JSX.Element => {
+  const dispatch = useAppDispatch();
+  const { 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]')}
+      role={MODAL_ROLE}
+    >
+      <div className="flex h-full w-full items-center justify-center">
+        <div
+          className={twMerge(
+            'flex h-5/6 w-10/12	flex-col	overflow-hidden rounded-lg',
+            modalName === 'login' && 'h-auto w-[400px]',
+          )}
+        >
+          <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>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};