implemented changes in markdown rendered

package.json

@@ -14,7 +14,8 @@
     "axios": "^1.10.0",
     "next": "15.3.4",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

src/components/TopLevel/BlogDetail/BlogDetail.stories.tsx

@@ -14,97 +14,35 @@ export const Default = {
     readTime: "1",
     tag: "fashion",
     img: "https://picsum.photos/1000/300",
-    content: [
-      {
-        type: "heading",
-        children: [
-          {
-            type: "text",
-            text: "Lorem ipsum dolor sit amet: ",
-          },
-        ],
-        level: 1,
-      },
-      {
-        type: "paragraph",
-        children: [
-          {
-            type: "text",
-            text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus efficitur posuere sodales. Ut et lectus volutpat",
-          },
-        ],
-      },
-      {
-        type: "list",
-        format: "unordered",
-        children: [
-          {
-            type: "list-item",
-            children: [
-              {
-                type: "text",
-                text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ",
-              },
-            ],
-          },
-          {
-            type: "list-item",
-            children: [
-              {
-                type: "text",
-                text: "Lorem ipsum dolor sit amet.",
-              },
-            ],
-          },
-          {
-            type: "list-item",
-            children: [
-              {
-                type: "text",
-                text: "Lorem ipsum dolor sit amet.",
-              },
-            ],
-          },
-          {
-            type: "list-item",
-            children: [
-              {
-                type: "text",
-                text: "Lorem ipsum dolor sit amet.",
-              },
-            ],
-          },
-        ],
-      },
-      {
-        type: "paragraph",
-        children: [
-          {
-            type: "text",
-            text: "",
-          },
-        ],
-      },
-      {
-        type: "paragraph",
-        children: [
-          {
-            text: "Lorem ipsum dolor sit amet.",
-            type: "text",
-            bold: true,
-          },
-        ],
-      },
-      {
-        type: "heading",
-        children: [
-          {
-            type: "text",
-            text: "Lorem ipsum dolor sit amet.",
-          },
-        ],
-        level: 3,
-      },
-    ],
+    content: `
+          # My Developer Journey
+
+          Welcome to my **developer blog**. I use this space to document what I learn, build, and break. 😅
+
+          ## 🔧 Skills I’m Learning
+
+          - HTML, CSS & JavaScript
+          - React & Next.js
+          - Node.js + Express
+          - MongoDB
+          - TypeScript
+
+          ## 📚 Favorite Resources
+
+          1. [MDN Web Docs](https://developer.mozilla.org)
+          2. [FreeCodeCamp](https://freecodecamp.org)
+          3. [Frontend Mentor](https://frontendmentor.io)
+
+          # Welcome to My Blog
+
+          This is a simple **Markdown** example to demonstrate basic formatting. You can _italicize_ text or make it **bold**.
+
+          ## Things I Like:
+
+          - 🧠 Learning new tech
+          - 📝 Writing blogs
+          - 🔗 [Check my website](https://example.com)
+
+          Here’s a sample code snippet:`,
   },
 };

src/components/TopLevel/BlogDetail/BlogDetail.tsx

+import ReactMarkdown from "react-markdown";
 import styles from "./BlogDetail.module.css";
 
 function BlogDetail({
@@ -9,48 +10,6 @@ function BlogDetail({
   img,
   content,
 }: any) {
-  const renderText = (node: any) => {
-    let text = node.text;
-    if (node.bold) text = <strong>{text}</strong>;
-    if (node.italic) text = <em>{text}</em>;
-    if (node.underline) text = <u>{text}</u>;
-    return text;
-  };
-
-  const renderChildren = (children: any[]) =>
-    children.map((child, idx) => {
-      if (child.type === "text") {
-        return <span key={idx}>{renderText(child)}</span>;
-      }
-      return null;
-    });
-
-  const renderNode = (node: any, idx: number) => {
-    switch (node.type) {
-      case "heading":
-        const HeadingTag: any = `h${node.level}`;
-        return (
-          <HeadingTag key={idx}>{renderChildren(node.children)}</HeadingTag>
-        );
-
-      case "paragraph":
-        return <p key={idx}>{renderChildren(node.children)}</p>;
-
-      case "list":
-        const ListTag = node.format === "unordered" ? "ul" : "ol";
-        return (
-          <ListTag key={idx}>
-            {node.children.map((item: any, i: number) => (
-              <li key={i}>{renderChildren(item.children)}</li>
-            ))}
-          </ListTag>
-        );
-
-      default:
-        return null;
-    }
-  };
-
   return (
     <article>
       <section className={styles["title-section"]}>
@@ -74,7 +33,7 @@ function BlogDetail({
       </section>
 
       <section className={styles["markdown-section"]}>
-        {content?.map((node: any, idx: number) => renderNode(node, idx))}
+        <ReactMarkdown>{content}</ReactMarkdown>
       </section>
     </article>
   );