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 { PlaygroundHeader } from "@/components/features/playground/header";
import { ProblemEditorProvider } from "@/providers/problem-editor-provider";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"; import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
interface PlaygroundLayoutProps { interface PlaygroundLayoutProps {
params: Promise<{ id: string }>;
problem: React.ReactNode; problem: React.ReactNode;
workspace: React.ReactNode; workspace: React.ReactNode;
terminal: React.ReactNode; terminal: React.ReactNode;
} }
export default function PlaygroundLayout({ export default async function PlaygroundLayout({
params,
problem, problem,
workspace, workspace,
terminal, terminal,
}: PlaygroundLayoutProps) { }: 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 ( return (
<div className="h-screen flex flex-col"> <div className="h-screen flex flex-col">
<PlaygroundHeader /> <ProblemEditorProvider
<main className="flex flex-grow overflow-y-hidden p-2.5 pt-0"> problemId={id}
<ResizablePanelGroup direction="horizontal" className="relative h-full flex"> templates={problemData.templates ?? []}
<ResizablePanel defaultSize={50} className="border border-muted rounded-xl min-w-9"> editorLanguageConfigs={editorLanguageConfigs}
{problem} languageServerConfigs={languageServerConfigs}
</ResizablePanel> >
<ResizableHandle className="mx-1 bg-transparent hover:bg-blue-500" /> <PlaygroundHeader />
<ResizablePanel defaultSize={50} className="min-w-9"> <main className="flex flex-grow overflow-y-hidden p-2.5 pt-0">
<ResizablePanelGroup direction="vertical"> <ResizablePanelGroup direction="horizontal" className="relative h-full flex">
<ResizablePanel defaultSize={50} className="border border-muted rounded-xl min-h-9"> <ResizablePanel defaultSize={50} className="border border-muted rounded-xl min-w-9">
{workspace} {problem}
</ResizablePanel> </ResizablePanel>
<ResizableHandle className="my-1 bg-transparent hover:bg-blue-500" /> <ResizableHandle className="mx-1 bg-transparent hover:bg-blue-500" />
<ResizablePanel defaultSize={50} className="border border-muted rounded-xl min-h-9"> <ResizablePanel defaultSize={50} className="min-w-9">
{terminal} <ResizablePanelGroup direction="vertical">
</ResizablePanel> <ResizablePanel defaultSize={50} className="border border-muted rounded-xl min-h-9">
</ResizablePanelGroup> {workspace}
</ResizablePanel> </ResizablePanel>
</ResizablePanelGroup> <ResizableHandle className="my-1 bg-transparent hover:bg-blue-500" />
</main> <ResizablePanel defaultSize={50} className="border border-muted rounded-xl min-h-9">
{terminal}
</ResizablePanel>
</ResizablePanelGroup>
</ResizablePanel>
</ResizablePanelGroup>
</main>
</ProblemEditorProvider>
</div> </div>
); );
} }