add: route to stand along page

src/components/Markdowns/MarkdownContent.js

@@ -9,11 +9,13 @@ import {usePath} from "../../utils/queries/path-queries";
 import {useMarkdownSetting} from "../../utils/queries/markdown-setting-queries";
 import {useMarkdownTemplate} from "../../utils/queries/markdown-template-queries";
 import {useMarkdownTemplateSetting} from "../../utils/queries/markdown-template-setting-queries";
+import MarkdownSettingModal from "../Modals/MarkdownSettingModal";
 
 const MarkdownContent = () => {
     const { strId } = useParams();
     const id = Number(strId);
     const [indexTitle, setIndexTitle] = useState(null);
+    const [isSettingModalOpen, setSettingModalOpen] = useState(false);
     const {data: markdown, isLoading, error} = useMarkdown(id);
     const {data: path, isFetching: isPathFetching} = usePath(markdown?.path_id);
     const {data: setting, isFetching: isSettingFetching} = useMarkdownSetting(markdown?.setting_id);
@@ -50,15 +52,28 @@ const MarkdownContent = () => {
 
     return (
         <div className="markdown-content-container">
-            <div className="field has-addons markdown-content-container-header">
-                <h1 className="title control">{markdown.title === "index" ? indexTitle : markdown.title}</h1>
+            <div className="is-flex is-justify-content-space-between is-align-items-center markdown-content-container-header">
+                <h1 className="title">{markdown.title === "index" ? indexTitle : markdown.title}</h1>
                 <PermissionGuard rolesRequired={['admin']}>
-                    <Link to={`/markdown/edit/${id}`} className="control button is-primary is-light">
-                        Edit
-                    </Link>
+                    <div className="field has-addons">
+                        <button
+                            className="control button is-info is-light"
+                            onClick={() => setSettingModalOpen(true)}
+                        >
+                            Settings
+                        </button>
+                        <Link to={`/markdown/edit/${id}`} className="control button is-primary is-light">
+                            Edit
+                        </Link>
+                    </div>
                 </PermissionGuard>
             </div>
             <MarkdownView content={JSON.parse(markdown.content)} template={template}/>
+            <MarkdownSettingModal 
+                isOpen={isSettingModalOpen}
+                markdown={markdown}
+                onClose={() => setSettingModalOpen(false)}
+            />
         </div>
     );
 };