Merge pull request #24 from YoubetDao/feature/markdown-renderer

feat: create markdown renderer and add tutorial page

package.json

@@ -27,8 +27,6 @@
     "@radix-ui/react-tabs": "^1.1.0",
     "@rainbow-me/rainbowkit": "^2.1.3",
     "@tanstack/react-query": "^4.36.1",
-    "@types/history": "^5.0.0",
-    "@types/qs": "^6.9.15",
     "axios": "^1.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -41,7 +39,10 @@
     "i18next-resources-to-backend": "^1.1.4",
     "jotai": "^2.9.1",
     "js-cookie": "^3.0.5",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.400.0",
+    "markdown-it": "^14.1.0",
+    "markdown-it-anchor": "^9.0.1",
     "qs": "^6.12.3",
     "react": "^18.3.1",
     "react-daisyui": "^5.0.3",
@@ -50,6 +51,7 @@
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.52.1",
     "react-i18next": "^13.2.2",
+    "react-intersection-observer": "^9.13.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.10.0",
     "recharts": "^2.12.7",
@@ -67,7 +69,10 @@
     "@tanstack/react-query-devtools": "^4.29.1",
     "@types/js-cookie": "^3.0.6",
     "@types/loadable__component": "^5.13.4",
+    "@types/lodash": "^4.17.7",
+    "@types/markdown-it": "^14.1.2",
     "@types/node": "^18.15.11",
+    "@types/qs": "^6.9.15",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.6",

src/components/icons.tsx

@@ -9,6 +9,7 @@ import {
   ListChecks,
   LucideProps,
   UserCircle2,
+  BookOpen,
 } from 'lucide-react'
 
 export const Icons = {
@@ -21,6 +22,7 @@ export const Icons = {
   users: Users,
   listChecks: ListChecks,
   profile: UserCircle2,
+  tutorial: BookOpen,
   github: ({ ...props }: LucideProps) => (
     <svg
       aria-hidden="true"

src/constants/data.ts

@@ -52,4 +52,12 @@ export const navItems: NavItem[] = [
     description: 'My Profile.',
     layout: 'dashboard',
   },
+  {
+    title: 'Tutorial',
+    href: '/tutorial',
+    icon: 'tutorial',
+    component: 'tutorial',
+    description: 'tutorial.',
+    layout: 'dashboard',
+  },
 ]