refactor(layout): use children prop instead of individual panel components

This commit is contained in:
cfngc4594 2025-04-06 15:58:12 +08:00
parent 8d7d88511e
commit 9598430c9a

View File

@ -1,29 +1,16 @@
import prisma from "@/lib/prisma"; import prisma from "@/lib/prisma";
import { notFound } from "next/navigation"; import { notFound } from "next/navigation";
import DockView from "@/components/dockview";
import { ProblemStoreProvider } from "@/providers/problem-store-provider"; import { ProblemStoreProvider } from "@/providers/problem-store-provider";
import { PlaygroundHeader } from "@/components/features/playground/header"; import { PlaygroundHeader } from "@/components/features/playground/header";
interface ProblemProps { interface ProblemProps {
params: Promise<{ id: string }>; params: Promise<{ id: string }>;
Description: React.ReactNode; children: React.ReactNode;
Solutions: React.ReactNode;
Submissions: React.ReactNode;
Code: React.ReactNode;
Testcase: React.ReactNode;
TestResult: React.ReactNode;
Bot: React.ReactNode;
} }
export default async function ProblemLayout({ export default async function ProblemLayout({
params, params,
Description, children,
Solutions,
Submissions,
Code,
Testcase,
TestResult,
Bot,
}: ProblemProps) { }: ProblemProps) {
const { id } = await params; const { id } = await params;
@ -54,73 +41,7 @@ export default async function ProblemLayout({
> >
<PlaygroundHeader /> <PlaygroundHeader />
<main className="flex flex-grow overflow-y-hidden p-2.5 pt-0"> <main className="flex flex-grow overflow-y-hidden p-2.5 pt-0">
<DockView {children}
storageKey="dockview:problem"
options={[
{
id: "Description",
title: "Description",
component: "Description",
tabComponent: "Description",
icon: "FileTextIcon",
node: Description,
},
{
id: "Solutions",
title: "Solutions",
component: "Solutions",
tabComponent: "Solutions",
icon: "FlaskConicalIcon",
node: Solutions,
position: { referencePanel: "Description", direction: "within" },
},
{
id: "Submissions",
title: "Submissions",
component: "Submissions",
tabComponent: "Submissions",
icon: "CircleCheckBigIcon",
node: Submissions,
position: { referencePanel: "Solutions", direction: "within" },
},
{
id: "Code",
title: "Code",
component: "Code",
tabComponent: "Code",
icon: "SquarePenIcon",
node: Code,
position: { referencePanel: "Submissions", direction: "right" },
},
{
id: "Bot",
title: "Bot",
component: "Bot",
tabComponent: "Bot",
icon: "BotIcon",
node: Bot,
position: { referencePanel: "Code", direction: "right" },
},
{
id: "Testcase",
title: "Testcase",
component: "Testcase",
tabComponent: "Testcase",
icon: "SquareCheckIcon",
node: Testcase,
position: { referencePanel: "Code", direction: "below" },
},
{
id: "TestResult",
title: "TestResult",
component: "TestResult",
tabComponent: "TestResult",
icon: "TerminalIcon",
node: TestResult,
position: { referencePanel: "Testcase", direction: "within" },
},
]}
/>
</main> </main>
</ProblemStoreProvider> </ProblemStoreProvider>
</div> </div>