refactor(playground): migrate problem description to client component

This commit is contained in:
cfngc4594 2025-03-24 10:33:14 +08:00
parent 288a3cc4c5
commit d0118eca65
2 changed files with 14 additions and 43 deletions

View File

@ -1,25 +1,13 @@
import prisma from "@/lib/prisma";
"use client";
import { notFound } from "next/navigation";
import { MdxRenderer } from "@/components/content/mdx-renderer";
import { useProblem } from "@/hooks/use-problem";
import MdxPreview from "@/components/mdx-preview";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import ProblemDescriptionFooter from "@/components/features/playground/problem/description/footer";
interface ProblemDescriptionPageProps {
params: Promise<{ id: string }>
}
export default async function ProblemDescriptionPage({
params
}: ProblemDescriptionPageProps) {
const { id } = await params;
const problem = await prisma.problem.findUnique({
where: { id },
select: {
title: true,
description: true,
}
});
export default function ProblemDescriptionPage() {
const { problem } = useProblem();
if (!problem) {
notFound();
@ -29,7 +17,7 @@ export default async function ProblemDescriptionPage({
<>
<div className="flex-1">
<ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]">
<MdxRenderer source={problem.description} />
<MdxPreview source={problem.description} />
<ScrollBar orientation="horizontal" />
</ScrollArea>
</div>

View File

@ -1,35 +1,18 @@
import prisma from "@/lib/prisma";
import { notFound } from "next/navigation";
import { MdxRenderer } from "@/components/content/mdx-renderer";
"use client";
import { useProblem } from "@/hooks/use-problem";
import MdxPreview from "@/components/mdx-preview";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import ProblemSolutionFooter from "@/components/features/playground/problem/solution/footer";
interface ProblemSolutionPageProps {
params: Promise<{ id: string }>;
}
export default async function ProblemSolutionPage({
params,
}: ProblemSolutionPageProps) {
const { id } = await params;
const problem = await prisma.problem.findUnique({
where: { id },
select: {
title: true,
solution: true,
},
});
if (!problem) {
notFound();
}
export default function ProblemSolutionPage() {
const { problem } = useProblem();
return (
<>
<div className="flex-1">
<ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]">
<MdxRenderer source={problem.solution} />
<MdxPreview source={problem.solution} />
<ScrollBar orientation="horizontal" />
</ScrollArea>
</div>