CodeSandBox/monaco-editor-lsp-next
2
0
Fork 0
mirror of https://github.com/cfngc4594/monaco-editor-lsp-next.git synced 2025-07-04 09:20:53 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: extract panel layout and simplify bot content structure

Browse Source
This commit is contained in:
cfngc4594 2025-06-20 23:03:23 +08:00
parent c372856c3a
commit ecaba8f48b
9 changed files with 56 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/features/problems/bot/components/content.tsx
View File

@ -37,13 +37,7 @@ export const BotContent = async ({ problemId }: BotContentProps) => {
const description = getLocalizedDescription(descriptions, locale as Locale);
return (
<div className="relative flex-1">
<div className="absolute h-full w-full">
<BotForm description={description} />
</div>
</div>
);
return <BotForm description={description} />;
};
export const BotContentSkeleton = () => {

5
src/features/problems/bot/components/panel.tsx
View File

@ -3,6 +3,7 @@ import {
BotContent,
BotContentSkeleton,
} from "@/features/problems/bot/components/content";
import { PanelLayout } from "@/features/problems/layouts/panel-layout";
interface BotPanelProps {
problemId: string;
@ -10,10 +11,10 @@ interface BotPanelProps {
export const BotPanel = ({ problemId }: BotPanelProps) => {
return (
<div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
<PanelLayout>
<Suspense fallback={<BotContentSkeleton />}>
<BotContent problemId={problemId} />
</Suspense>
</div>
</PanelLayout>
);
};

19
src/features/problems/code/components/panel.tsx
View File

@ -3,6 +3,7 @@ import {
CodeContent,
CodeContentSkeleton,
} from "@/features/problems/code/components/content";
import { PanelLayout } from "@/features/problems/layouts/panel-layout";
import { CodeFooter } from "@/features/problems/code/components/footer";
import { CodeToolbar } from "@/features/problems/code/components/toolbar/code-toolbar";
@ -12,16 +13,14 @@ interface CodePanelProps {
export const CodePanel = ({ problemId }: CodePanelProps) => {
return (
<div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
<CodeToolbar className="border-b" />
<div className="relative flex-1">
<div className="absolute h-full w-full">
<Suspense fallback={<CodeContentSkeleton />}>
<CodeContent problemId={problemId} />
</Suspense>
</div>
<PanelLayout>
<div className="h-full flex flex-col">
<CodeToolbar className="border-b" />
<Suspense fallback={<CodeContentSkeleton />}>
<CodeContent problemId={problemId} />
</Suspense>
<CodeFooter />
</div>
<CodeFooter />
</div>
</PanelLayout>
);
};

15
src/features/problems/description/components/panel.tsx
View File

@ -3,6 +3,7 @@ import {
DescriptionContent,
DescriptionContentSkeleton,
} from "@/features/problems/description/components/content";
import { PanelLayout } from "@/features/problems/layouts/panel-layout";
interface DescriptionPanelProps {
problemId: string;
@ -10,14 +11,10 @@ interface DescriptionPanelProps {
export const DescriptionPanel = ({ problemId }: DescriptionPanelProps) => {
return (
<div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
<div className="relative flex-1">
<div className="absolute h-full w-full">
<Suspense fallback={<DescriptionContentSkeleton />}>
<DescriptionContent problemId={problemId} />
</Suspense>
</div>
</div>
</div>
<PanelLayout>
<Suspense fallback={<DescriptionContentSkeleton />}>
<DescriptionContent problemId={problemId} />
</Suspense>
</PanelLayout>
);
};

15
src/features/problems/detail/components/panel.tsx
View File

@ -3,6 +3,7 @@ import {
DetailContent,
DetailContentSkeleton,
} from "@/features/problems/detail/components/content";
import { PanelLayout } from "@/features/problems/layouts/panel-layout";
import { DetailHeader } from "@/features/problems/detail/components/header";
interface DetailPanelProps {
@ -15,15 +16,11 @@ export const DetailPanel = ({ submissionId }: DetailPanelProps) => {
}
return (
<div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
<PanelLayout>
<DetailHeader />
<div className="relative flex-1">
<div className="absolute h-full w-full">
<Suspense fallback={<DetailContentSkeleton />}>
<DetailContent submissionId={submissionId} />
</Suspense>
</div>
</div>
</div>
<Suspense fallback={<DetailContentSkeleton />}>
<DetailContent submissionId={submissionId} />
</Suspense>
</PanelLayout>
);
};

13
src/features/problems/layouts/panel-layout.tsx Normal file
View File

@ -0,0 +1,13 @@
interface PanelLayoutProps {
children: React.ReactNode;
}
export const PanelLayout = ({ children }: PanelLayoutProps) => {
return (
<div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
<div className="relative flex-1">
<div className="absolute h-full w-full">{children}</div>
</div>
</div>
);
};

15
src/features/problems/solution/components/panel.tsx
View File

@ -3,6 +3,7 @@ import {
SolutionContent,
SolutionContentSkeleton,
} from "@/features/problems/solution/components/content";
import { PanelLayout } from "@/features/problems/layouts/panel-layout";
interface SolutionPanelProps {
problemId: string;
@ -10,14 +11,10 @@ interface SolutionPanelProps {
export const SolutionPanel = ({ problemId }: SolutionPanelProps) => {
return (
<div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
<div className="relative flex-1">
<div className="absolute h-full w-full">
<Suspense fallback={<SolutionContentSkeleton />}>
<SolutionContent problemId={problemId} />
</Suspense>
</div>
</div>
</div>
<PanelLayout>
<Suspense fallback={<SolutionContentSkeleton />}>
<SolutionContent problemId={problemId} />
</Suspense>
</PanelLayout>
);
};

15
src/features/problems/submission/components/panel.tsx
View File

@ -3,6 +3,7 @@ import {
SubmissionContent,
SubmissionContentSkeleton,
} from "@/features/problems/submission/components/content";
import { PanelLayout } from "@/features/problems/layouts/panel-layout";
interface SubmissionPanelProps {
problemId: string;
@ -10,14 +11,10 @@ interface SubmissionPanelProps {
export const SubmissionPanel = ({ problemId }: SubmissionPanelProps) => {
return (
<div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
<div className="relative flex-1">
<div className="absolute h-full w-full">
<Suspense fallback={<SubmissionContentSkeleton />}>
<SubmissionContent problemId={problemId} />
</Suspense>
</div>
</div>
</div>
<PanelLayout>
<Suspense fallback={<SubmissionContentSkeleton />}>
<SubmissionContent problemId={problemId} />
</Suspense>
</PanelLayout>
);
};

15
src/features/problems/testcase/panel.tsx
View File

@ -3,6 +3,7 @@ import {
TestcaseContent,
TestcaseContentSkeleton,
} from "@/features/problems/testcase/content";
import { PanelLayout } from "@/features/problems/layouts/panel-layout";
interface TestcasePanelProps {
problemId: string;
@ -10,14 +11,10 @@ interface TestcasePanelProps {
export const TestcasePanel = ({ problemId }: TestcasePanelProps) => {
return (
<div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
<div className="relative flex-1">
<div className="absolute h-full w-full">
<Suspense fallback={<TestcaseContentSkeleton />}>
<TestcaseContent problemId={problemId} />
</Suspense>
</div>
</div>
</div>
<PanelLayout>
<Suspense fallback={<TestcaseContentSkeleton />}>
<TestcaseContent problemId={problemId} />
</Suspense>
</PanelLayout>
);
};