feat: ability to add and view blogs for a user

frontend/src/utils/BlogViewer.tsx

@@ -1,15 +1,43 @@
 import { useEffect, useState } from "react";
-import Markdown from "react-markdown";
 import { useParams } from "react-router-dom";
+import { API_URL } from "./constants";
+import type { Blog } from "./types";
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkRehype from "remark-rehype";
+import rehypeRaw from "rehype-raw";
+import "../styles/markdown.css";
 
 export function BlogViewer() {
-  const [content, setContent] = useState("");
-  const { slug } = useParams();
+  const { slug } = useParams<{ slug: string }>();
+  const [blog, setBlog] = useState<Blog | null>(null);
 
   useEffect(() => {
-    fetch(`localhost:8000/get-blogs/${slug}`)
-      .then((res) => res.text())
-      .then(setContent);
-  }, []);
-  return <Markdown>{content}</Markdown>;
+    if (!slug) return;
+    fetch(`${API_URL}/blogs/${slug}`)
+      .then((res) => res.json())
+      .then((data: Blog) => setBlog(data))
+      .catch((err) => console.error(err));
+  }, [slug]);
+
+  if (!blog) {
+    return <p>Loading...</p>;
+  }
+
+  return (
+    <div className="max-w-2xl mx-auto py-10 space-y-6">
+      <h1 className="text-3xl font-bold">{blog.title.toUpperCase()}</h1>
+      <p className="text-sm text-gray-500">By User {blog.author_id}</p>
+      <p className="italic text-gray-600 dark:text-gray-400">
+        {blog.description}
+      </p>
+      <div className="markdown-body mx-auto p-4">
+        <Markdown
+          remarkPlugins={[remarkGfm, remarkRehype]}
+          rehypePlugins={[rehypeRaw]}
+          children={blog.body}
+        ></Markdown>
+      </div>
+    </div>
+  );
 }