From 7db6f4e20e98fb86470cd50421c26f6cc56f3dbd Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Thu, 20 Feb 2025 17:58:49 +0800
Subject: [PATCH] feat(components): add ProblemDescription component to render
 markdown

- Added ProblemDescription component that uses MDXRemote to render markdown content.
- Includes a Skeleton loader while content is loading and a horizontal scrollbar.
- Wrapped content in a ScrollArea with a max-height limit for better UI experience.
---
 src/components/problem-description.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 src/components/problem-description.tsx

diff --git a/src/components/problem-description.tsx b/src/components/problem-description.tsx
new file mode 100644
index 0000000..cdc2de6
--- /dev/null
+++ b/src/components/problem-description.tsx
@@ -0,0 +1,21 @@
+import { Suspense } from "react";
+import { MDXRemote } from "next-mdx-remote/rsc";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+
+interface ProblemDescriptionProps {
+  mdxSource: string;
+}
+
+export function ProblemDescription({ mdxSource }: ProblemDescriptionProps) {
+  return (
+    <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-56px)]">
+      <Suspense fallback={<Skeleton className="h-full w-full" />}>
+        <div className="markdown-body">
+          <MDXRemote source={mdxSource} />
+        </div>
+      </Suspense>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  );
+}