Display search modal when the search button is pressed

apps/app/src/components/InstantSearch/SearchModal.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+} from 'reactstrap';
+
+import { useSearchModal } from '~/stores/modal';
+
+const SearchModal = (): JSX.Element => {
+  const { data: searchModalData, close: closeSearchModal } = useSearchModal();
+
+  return (
+    <Modal isOpen={searchModalData?.isOpened ?? false} toggle={closeSearchModal}>
+      <ModalHeader>
+        header
+      </ModalHeader>
+
+      <ModalBody>
+        body
+      </ModalBody>
+
+      <ModalFooter>
+        footer
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default SearchModal;

apps/app/src/components/Layout/BasicLayout.tsx

@@ -23,6 +23,7 @@ const PageRenameModal = dynamic(() => import('../PageRenameModal'), { ssr: false
 const PagePresentationModal = dynamic(() => import('../PagePresentationModal'), { ssr: false });
 const PageAccessoriesModal = dynamic(() => import('../PageAccessoriesModal').then(mod => mod.PageAccessoriesModal), { ssr: false });
 const DeleteBookmarkFolderModal = dynamic(() => import('../DeleteBookmarkFolderModal').then(mod => mod.DeleteBookmarkFolderModal), { ssr: false });
+const SearchModal = dynamic(() => import('../InstantSearch/SearchModal'), { ssr: false });
 
 
 type Props = {
@@ -57,6 +58,7 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
         <DeleteAttachmentModal />
         <DeleteBookmarkFolderModal />
         <PutbackPageModal />
+        <SearchModal />
       </DndProvider>
 
       <PagePresentationModal />