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={{

package.json

@@ -28,6 +28,7 @@
     "react-code-blocks": "^0.0.9-0",
     "react-dom": "18.2.0",
     "react-markdown": "^8.0.4",
+    "react-select": "^5.7.0",
     "react-syntax-highlighter": "^15.5.0",
     "reflect-metadata": "^0.1.13",
     "sass": "^1.57.0",

pages/api/categories/index.tsx

@@ -12,18 +12,12 @@ export default async function handler(req: Request, res: Response) {
       if (result !== null) {
         res.end(JSON.stringify(result));
       } else {
-        const error: ResponseError = {
-          code: "404",
-          message: "No categories found!",
-        };
-        res.status(404).send(JSON.stringify(error));
+        console.log("No categories found");
+        res.end(JSON.stringify([]));
       }
     })
     .catch((err) => {
-      const error: ResponseError = {
-        code: "500",
-        message: err,
-      };
-      res.status(500).send(JSON.stringify(error));
+      console.log(err);
+      res.end(JSON.stringify([]));
     });
 }

styles/inputs.scss

@@ -0,0 +1,73 @@
+@import "variables_colors.scss";
+@import "variables.scss";
+
+input {
+  border: 2px solid rgba(95, 95, 95, 0.5);
+  background-color: transparent;
+  height: 30px;
+  padding: 5px 5px 5px 5px;
+  color: var(--color-font);
+  border-radius: 3px;
+  outline: none;
+  transition: all 50ms linear;
+
+  &::placeholder {
+    font-weight: bold;
+  }
+
+  &:hover {
+    border-color: rgba(177, 177, 177, 0.608);
+  }
+
+  &:focus {
+    border-color: var(--color-accent);
+  }
+  &.error {
+    border-color: var(--color-error);
+  }
+  &.success {
+    border-color: var(--color-success);
+  }
+
+  &.warning {
+    border-color: var(--color-warning);
+  }
+
+  &.info {
+    border-color: var(--color-info);
+  }
+}
+
+.react-select-container {
+  .react-select__control {
+    background-color: var(--color-background-secondary);
+    border-color: rgba(95, 95, 95, 0.5);
+    transition: none;
+
+    &:hover {
+      border-color: rgba(95, 95, 95, 0.5);
+    }
+  }
+
+  .react-select__menu {
+    background-color: var(--color-background-secondary);
+    border: 1px solid rgba(95, 95, 95, 0.5);
+  }
+
+  .react-select__option {
+    background-color: var(--color-background-secondary);
+
+    &:hover {
+      background-color: var(--bg-primary);
+    }
+  }
+
+  .react-select__indicator-separator {
+    background-color: rgba(95, 95, 95, 0.5);
+  }
+
+  .react-select__placeholder,
+  .react-select__single-value {
+    color: var(--font-color);
+  }
+}

styles/modules/AdminArticlesCreate.module.scss

@@ -9,14 +9,26 @@
     max-width: 1800px;
     padding: 0px 24px;
 
-    .content {
+    .articleEditor {
       display: flex;
       flex-direction: column;
-      textarea {
-        color: var(--font-color);
-        background-color: rgba(16, 16, 16, 0.234);
-        width: 100%;
-        min-height: 500px;
+      .markdown {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 10px 10px;
+        textarea {
+          color: var(--font-color);
+          border: 2px solid rgba(59, 59, 59, 0.434);
+          background-color: transparent;
+          min-height: 700px;
+          resize: none;
+          display: block;
+          border-radius: 0px;
+          outline: 0;
+          resize: vertical;
+          font-family: inherit;
+          font-size: inherit;
+        }
       }
     }
   }

styles/variables_colors.scss

@@ -6,10 +6,16 @@
   /*! By default colors are in DARK mode */
   /* Colors: General */
   --color-background-body: #181a1b;
+  --color-background-secondary: #2c3032;
   --color-font: #ffffff;
   --color-font-muted: #929292;
   --color-shadow-nav: #00000033;
 
+  --color-error: #cf000f;
+  --color-success: #009944;
+  --color-info: #63c0df;
+  --color-warning: #f0541e;
+
   --color-overlay-mix: var(--color-font);
   --color-background-nav: transparent;
   --color-svg-nav: #bfbfbf;