Display dummy modal

apps/app/src/client/components/PageEditor/Preview.tsx

@@ -1,6 +1,11 @@
 import type { CSSProperties, JSX } from 'react';
+import { useState } from 'react';
 
 import { useSlidesByFrontmatter } from '@growi/presentation/dist/services';
+import {
+  Modal, ModalHeader, ModalBody,
+} from 'reactstrap';
+
 
 import RevisionRenderer from '~/components/PageView/RevisionRenderer';
 import type { RendererOptions } from '~/interfaces/renderer-options';
@@ -35,6 +40,10 @@ const Preview = (props: Props): JSX.Element => {
 
   const fluidLayoutClass = expandContentWidth ? 'fluid-layout' : '';
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const toggleModal = () => setIsModalOpen(!isModalOpen);
+
 
   return (
     <div
@@ -42,6 +51,17 @@ const Preview = (props: Props): JSX.Element => {
       className={`${moduleClass} ${fluidLayoutClass} ${pagePath === '/Sidebar' ? 'preview-sidebar' : ''}`}
       style={style}
     >
+      <div className="position-absolute top-0 end-0 m-3" style={{ zIndex: 10 }}>
+        <button
+          type="button"
+          className="btn btn-sm btn-primary"
+          onClick={toggleModal}
+        >
+          <span className="material-symbols-outlined me-1" style={{ fontSize: '18px' }}>open_in_new</span>
+          モーダルを開く
+        </button>
+      </div>
+
       { markdown != null
         && (
           isSlide != null
@@ -49,6 +69,15 @@ const Preview = (props: Props): JSX.Element => {
             : <RevisionRenderer rendererOptions={rendererOptions} markdown={markdown}></RevisionRenderer>
         )
       }
+
+      <Modal isOpen={isModalOpen} toggle={toggleModal} size="lg" centered>
+        <ModalHeader toggle={toggleModal}>
+          Editor guide
+        </ModalHeader>
+        <ModalBody>
+          <p>Editor guide contents (WIP)</p>
+        </ModalBody>
+      </Modal>
     </div>
   );