Response

"use client"

import { useEffect, useState } from "react"
import ReactMarkdown from "react-markdown"
import remarkGfm from "remark-gfm"
import rehypeHighlight from "rehype-highlight"

export default function Example() {
  const tokens = [
    "### Welcome",
    "\n\n",
    "This is a **rich markdown** showcase with multiple features.",
    "\n\n---\n\n",
    "## Data Table\n\n",
    "| Name | Role | Status |\n",
    "|------|------|--------|\n",
    "| Alice | Engineer | Active |\n",
    "| Bob | Designer | Active |\n",
    "| Carol | PM | Active |\n\n",
    "## Inspiration\n\n",
    "> *Simplicity is the ultimate sophistication.*\n",
    "> — Leonardo da Vinci\n\n",
    "## Inline and Block Code\n\n",
    "Use `let total = items.length` to count elements.\n\n",
    "```python\n",
    "def greet(name):\n",
    "    return f\"Hello, {name}!\"\n",
    "print(greet(\"World\"))\n",
    "```\n\n",
    "## Math\n\n",
    "Inline math: $a^2 + b^2 = c^2$.\n\n",
    "Displayed equation:\n\n",
    "$$\\\\int_0^1 x^2\\\\,dx = \\\\frac{1}{3}$$\n",
  ]

  const [content, setContent] = useState("")

  useEffect(() => {
    let i = 0
    let acc = ""
    const id = setInterval(() => {
      if (i < tokens.length) {
        acc += tokens[i++]
        setContent(acc)
      } else {
        clearInterval(id)
      }
    }, 100)
    return () => clearInterval(id)
  }, [])

  return (
    <div className="p-10 prose prose-invert max-w-none">
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={[rehypeHighlight]}
      >
        {content}
      </ReactMarkdown>
    </div>
  )
}