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

View File

@ -1,35 +1,18 @@
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 { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import ProblemSolutionFooter from "@/components/features/playground/problem/solution/footer"; import ProblemSolutionFooter from "@/components/features/playground/problem/solution/footer";
interface ProblemSolutionPageProps { export default function ProblemSolutionPage() {
params: Promise<{ id: string }>; const { problem } = useProblem();
}
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();
}
return ( return (
<> <>
<div className="flex-1"> <div className="flex-1">
<ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]"> <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]">
<MdxRenderer source={problem.solution} /> <MdxPreview source={problem.solution} />
<ScrollBar orientation="horizontal" /> <ScrollBar orientation="horizontal" />
</ScrollArea> </ScrollArea>
</div> </div>