add: markdown permission setting

improve: template

src/components/Navigations/SideTabs/TemplateTab.js

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { useMarkdownTemplates } from "../../../utils/queries/markdown-template-queries";
+import PermissionGuard from "../../PermissionGuard";
+import { useNavigate } from "react-router-dom";
+
+const TemplateTab = () => {
+    const { data: templates, isLoading, error } = useMarkdownTemplates();
+    const [keyword, setKeyword] = useState("");
+    const navigate = useNavigate();
+
+    const filteredTemplates = templates?.filter(template => 
+        template.title.toLowerCase().includes(keyword.toLowerCase())
+    );
+
+    const handleTemplateClick = (templateId) => {
+        navigate(`/template/edit/${templateId}`);
+    };
+
+    if (isLoading) return <p>Loading...</p>;
+    if (error) return <p>Error loading templates</p>;
+
+    return (
+        <aside className="menu">
+            <div className="control is-expanded">
+                <input
+                    className="input is-small"
+                    type="text"
+                    placeholder="Search templates..."
+                    onChange={(e) => setKeyword(e.target.value)}
+                />
+            </div>
+            <PermissionGuard rolesRequired={["admin", "creator"]}>
+                <a
+                    href="/template/create"
+                    className="button is-primary is-small is-fullwidth"
+                    style={{ marginBottom: "10px" }}
+                >
+                    Create New Template
+                </a>
+            </PermissionGuard>
+
+            {!filteredTemplates || filteredTemplates.length === 0 ? (
+                <p>No templates found</p>
+            ) : (
+                <div className="template-list">
+                    {filteredTemplates.map(template => (
+                        <button
+                            key={template.id}
+                            className="button is-light is-fullwidth template-button"
+                            onClick={() => handleTemplateClick(template.id)}
+                            style={{ marginBottom: "5px", textAlign: "left", justifyContent: "flex-start" }}
+                        >
+                            {template.title}
+                        </button>
+                    ))}
+                </div>
+            )}
+        </aside>
+    );
+};
+
+export default TemplateTab;