feat(playground/problem): add solution tab and update description import

This commit is contained in:
cfngc4594 2025-02-25 14:40:06 +08:00
parent 50d1f4cf8e
commit 32f3ecff0f
3 changed files with 28 additions and 4 deletions

View File

@ -1,6 +1,6 @@
import MdxPreview from "@/components/mdx-preview"; import MdxPreview from "@/components/mdx-preview";
import { DEFAULT_PROBLEM } from "@/config/problem"; import { DEFAULT_PROBLEM_DESCRIPTION } from "@/config/problem/description";
export default function ProblemDescriptionPage() { export default function ProblemDescriptionPage() {
return <MdxPreview source={DEFAULT_PROBLEM} />; return <MdxPreview source={DEFAULT_PROBLEM_DESCRIPTION} />;
} }

View File

@ -0,0 +1,6 @@
import MdxPreview from "@/components/mdx-preview";
import { DEFAULT_PROBLEM_SOLUTION } from "@/config/problem/solution";
export default function ProblemSolutionPage() {
return <MdxPreview source={DEFAULT_PROBLEM_SOLUTION} />;
}

View File

@ -1,12 +1,16 @@
import { FileTextIcon } from "lucide-react"; import { FileTextIcon, FlaskConicalIcon } from "lucide-react";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
interface ProblemLayoutProps { interface ProblemLayoutProps {
description: React.ReactNode; description: React.ReactNode;
solution: React.ReactNode;
} }
export default function ProblemLayout({ description }: ProblemLayoutProps) { export default function ProblemLayout({
description,
solution,
}: ProblemLayoutProps) {
return ( return (
<Tabs defaultValue="description" className="h-full flex flex-col"> <Tabs defaultValue="description" className="h-full flex flex-col">
<ScrollArea className="h-9 flex-none bg-muted px-1"> <ScrollArea className="h-9 flex-none bg-muted px-1">
@ -22,12 +26,26 @@ export default function ProblemLayout({ description }: ProblemLayoutProps) {
/> />
Description Description
</TabsTrigger> </TabsTrigger>
<TabsTrigger
value="solution"
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-full data-[state=active]:shadow-none"
>
<FlaskConicalIcon
className="-ms-0.5 me-1.5 opacity-60"
size={16}
aria-hidden="true"
/>
Solution
</TabsTrigger>
</TabsList> </TabsList>
<ScrollBar orientation="horizontal" /> <ScrollBar orientation="horizontal" />
</ScrollArea> </ScrollArea>
<TabsContent value="description" className="grow mt-0"> <TabsContent value="description" className="grow mt-0">
{description} {description}
</TabsContent> </TabsContent>
<TabsContent value="solution" className="grow mt-0">
{solution}
</TabsContent>
</Tabs> </Tabs>
); );
} }