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-layout): integrate problem data fetching and editor configuration

Browse Source
This commit is contained in:
cfngc4594 2025-03-20 16:12:23 +08:00
parent d79b88e0b6
commit 321a712bf9
1 changed files with 52 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/app/(app)/problems/[id]/layout.tsx
View File

@ -1,39 +1,70 @@
import prisma from "@/lib/prisma";
import { notFound } from "next/navigation";
import { PlaygroundHeader } from "@/components/features/playground/header";
import { ProblemEditorProvider } from "@/providers/problem-editor-provider";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
interface PlaygroundLayoutProps {
params: Promise<{ id: string }>;
problem: React.ReactNode;
workspace: React.ReactNode;
terminal: React.ReactNode;
}
export default function PlaygroundLayout({
export default async function PlaygroundLayout({
params,
problem,
workspace,
terminal,
}: PlaygroundLayoutProps) {
const { id } = await params;
const [
problemData,
editorLanguageConfigs,
languageServerConfigs,
] = await Promise.all([
prisma.problem.findUnique({
where: { id },
select: { templates: true },
}),
prisma.editorLanguageConfig.findMany(),
prisma.languageServerConfig.findMany(),
]);
if (!problemData) {
return notFound();
}
return (
<div className="h-screen flex flex-col">
<PlaygroundHeader />
<main className="flex flex-grow overflow-y-hidden p-2.5 pt-0">
<ResizablePanelGroup direction="horizontal" className="relative h-full flex">
<ResizablePanel defaultSize={50} className="border border-muted rounded-xl min-w-9">
{problem}
</ResizablePanel>
<ResizableHandle className="mx-1 bg-transparent hover:bg-blue-500" />
<ResizablePanel defaultSize={50} className="min-w-9">
<ResizablePanelGroup direction="vertical">
<ResizablePanel defaultSize={50} className="border border-muted rounded-xl min-h-9">
{workspace}
</ResizablePanel>
<ResizableHandle className="my-1 bg-transparent hover:bg-blue-500" />
<ResizablePanel defaultSize={50} className="border border-muted rounded-xl min-h-9">
{terminal}
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
</ResizablePanelGroup>
</main>
<ProblemEditorProvider
problemId={id}
templates={problemData.templates ?? []}
editorLanguageConfigs={editorLanguageConfigs}
languageServerConfigs={languageServerConfigs}
>
<PlaygroundHeader />
<main className="flex flex-grow overflow-y-hidden p-2.5 pt-0">
<ResizablePanelGroup direction="horizontal" className="relative h-full flex">
<ResizablePanel defaultSize={50} className="border border-muted rounded-xl min-w-9">
{problem}
</ResizablePanel>
<ResizableHandle className="mx-1 bg-transparent hover:bg-blue-500" />
<ResizablePanel defaultSize={50} className="min-w-9">
<ResizablePanelGroup direction="vertical">
<ResizablePanel defaultSize={50} className="border border-muted rounded-xl min-h-9">
{workspace}
</ResizablePanel>
<ResizableHandle className="my-1 bg-transparent hover:bg-blue-500" />
<ResizablePanel defaultSize={50} className="border border-muted rounded-xl min-h-9">
{terminal}
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
</ResizablePanelGroup>
</main>
</ProblemEditorProvider>
</div>
);
}