add markdown viewer

app/Markdown.tsx

@@ -3,32 +3,36 @@ import PropTypes from "prop-types";
 import ReactMarkdown from "react-markdown";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import oneDark from "react-syntax-highlighter/dist/esm/styles/prism/one-dark";
+import LoadMarkdown from "./articles/[categoryName]/[articleName]/LoadMarkdown";
 
 export default function Markdown({ value }: { value: any }) {
   return (
-    <ReactMarkdown
-      // eslint-disable-next-line react/no-children-prop
-      children={value}
-      components={{
-        code({ node, inline, className, children, ...props }) {
-          const match = /language-(\w+)/.exec(className || "");
-          return !inline && match ? (
-            <SyntaxHighlighter
-              // eslint-disable-next-line react/no-children-prop
-              children={String(children).replace(/\n$/, "")}
-              style={oneDark}
-              language={match[1]}
-              PreTag="div"
-              {...props}
-            />
-          ) : (
-            <code className={className} {...props}>
-              {children}
-            </code>
-          );
-        },
-      }}
-    />
+    <div>
+      <ReactMarkdown
+        // eslint-disable-next-line react/no-children-prop
+        children={value}
+        components={{
+          code({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || "");
+            return !inline && match ? (
+              <SyntaxHighlighter
+                // eslint-disable-next-line react/no-children-prop
+                children={String(children).replace(/\n$/, "")}
+                style={oneDark}
+                language={match[1]}
+                PreTag="div"
+                {...props}
+              />
+            ) : (
+              <code className={className} {...props}>
+                {children}
+              </code>
+            );
+          },
+        }}
+      />
+      <LoadMarkdown />
+    </div>
   );
 }
 

app/Nav.tsx

@@ -84,6 +84,7 @@ export default function Nav({ categories }: { categories: Category[] }) {
             <div className={styles.dropDownContainer}>
               <div className={styles.content}>
                 <Link href={"/articles"}>All</Link>
+
                 {categories?.map((cat, i) => {
                   {
                     return (

app/admin/articles/create/page.tsx

@@ -6,23 +6,33 @@ import { useState, useRef } from "react";
 import styles from "../../../../styles/modules/AdminArticlesCreate.module.scss";
 import { PostArticle } from "../../../../types/postData";
 import Markdown from "../../../Markdown";
+import { Category } from "@prisma/client";
+import "../../../../styles/inputs.scss";
+import Select, { GroupBase, OptionsOrGroups } from "react-select";
+import { apiUrl } from "../../../global";
+import urlJoin from "url-join";
 
 export default function AdminArticlesCreate() {
   const [formData, setFormData] = useState<PostArticle>(null);
   const [markdown, setMarkdown] = useState<string>("");
-
+  const [selectedCategory, setSelectedCategory] = useState<string>();
   const titleRef = useRef<HTMLInputElement>(null);
+  const markdownTextAreaRef = useRef<HTMLTextAreaElement>(null);
 
-  function handleFormChange({ newMarkdownText = markdown }) {
+  const selectCategoriesOptions: any = [
+    { value: "chocolate", label: "Chocolate" },
+    { value: "strawberry", label: "Strawberry" },
+    { value: "vanilla", label: "Vanilla" },
+  ];
+  function handleFormChange() {
+    setMarkdown(markdownTextAreaRef.current.value);
     setFormData({
       name: titleRef.current.value.replaceAll(" ", "%20"),
       title: titleRef.current.value,
       introduction: "test intro",
       markdown: markdown,
-      categoryId: 1,
+      categoryId: 2,
     });
-
-    setMarkdown(newMarkdownText);
   }
 
   async function postData() {
@@ -49,20 +59,29 @@ export default function AdminArticlesCreate() {
         send
       </button>
       <div className={styles.form}>
-        <div className={styles.ContentTable}>contenttable</div>
+        <div className={styles.contentTableEditor}>contenttable</div>
 
-        <div className={styles.content}>
+        <div className={styles.articleEditor}>
+          <Select
+            className="react-select-container"
+            classNamePrefix="react-select"
+            value={selectedCategory}
+            onChange={handleFormChange}
+            options={selectCategoriesOptions}
+          />
           <input
-            onChange={() => {
-              handleFormChange({});
-            }}
+            onChange={handleFormChange}
+            className={""}
             type="text"
             name="title"
             placeholder="title"
             ref={titleRef}
           />
-          <textarea></textarea>
-          <Markdown value={markdown} />
+
+          <div className={styles.markdown}>
+            <textarea ref={markdownTextAreaRef} onChange={handleFormChange}></textarea>
+            <Markdown value={markdown} />
+          </div>
         </div>
       </div>
     </div>

app/articles/[categoryName]/[articleName]/LoadMarkdown.tsx

@@ -7,35 +7,35 @@ import "../../../../styles/prism_themes/prism-one-dark.css";
 //import "../../../styles/prism_themes/prism-one-light.css";
 
 export default function LoadMarkdown() {
-	useEffect(() => {
-		document.querySelectorAll("pre").forEach((pre) => {
-			if (pre.classList.length < 1) {
-				pre.classList.add("language-");
-			}
-		});
+  useEffect(() => {
+    document.querySelectorAll("pre").forEach((pre) => {
+      if (pre.classList.length < 1) {
+        pre.classList.add("language-");
+      }
+    });
 
-		document.querySelectorAll("code").forEach((c) => {
-			if (c.classList.length < 1) {
-				c.classList.add("language-");
-			}
-		});
+    document.querySelectorAll("code").forEach((c) => {
+      if (c.classList.length < 1) {
+        c.classList.add("language-");
+      }
+    });
 
-		document.querySelectorAll("blockquote").forEach((bq) => {
-			bq.classList.add("blockquote");
-		});
+    document.querySelectorAll("blockquote").forEach((bq) => {
+      bq.classList.add("blockquote");
+    });
 
-		document.querySelectorAll("li").forEach((li) => {
-			let paragraphText = "";
-			li.querySelectorAll("p").forEach((p) => {
-				paragraphText = p.innerHTML;
-			});
+    document.querySelectorAll("li").forEach((li) => {
+      let paragraphText = "";
+      li.querySelectorAll("p").forEach((p) => {
+        paragraphText = p.innerHTML;
+      });
 
-			if (paragraphText != "") {
-				li.innerHTML = paragraphText;
-			}
-		});
+      if (paragraphText != "") {
+        li.innerHTML = paragraphText;
+      }
+    });
 
-		Prism.highlightAll();
-	}, []);
-	return <div></div>;
+    Prism.highlightAll();
+  }, []);
+  return <div></div>;
 }

app/articles/[categoryName]/[articleName]/page.tsx

@@ -65,7 +65,7 @@ export default async function ArticlePage({ params }: { params: { articleName: s
           <p>{article?.introduction}</p>
         </div>
         <Markdown value={markdown} />
-        <LoadMarkdown />
+
         {/* <div
           className="markdown"
           dangerouslySetInnerHTML={{