CodeSandBox/monaco-editor-lsp-next
2
0
Fork 0
mirror of https://github.com/cfngc4594/monaco-editor-lsp-next.git synced 2025-05-18 15:26:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/(app)/playground/@problem/@description/page.tsx
View File

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

6
src/app/(app)/playground/@problem/@solution/page.tsx Normal file
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} />;
}

22
src/app/(app)/playground/@problem/layout.tsx
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
interface ProblemLayoutProps {
description: React.ReactNode;
solution: React.ReactNode;
}
export default function ProblemLayout({ description }: ProblemLayoutProps) {
export default function ProblemLayout({
description,
solution,
}: ProblemLayoutProps) {
return (
<Tabs defaultValue="description" className="h-full flex flex-col">
<ScrollArea className="h-9 flex-none bg-muted px-1">
@ -22,12 +26,26 @@ export default function ProblemLayout({ description }: ProblemLayoutProps) {
/>
Description
</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>
<ScrollBar orientation="horizontal" />
</ScrollArea>
<TabsContent value="description" className="grow mt-0">
{description}
</TabsContent>
<TabsContent value="solution" className="grow mt-0">
{solution}
</TabsContent>
</Tabs>
);
}