Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-05-17 14:56:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(layout): add layout with suspense boundary for problem

Browse Source
This commit is contained in:
cfngc4594 2025-04-16 18:05:55 +08:00
parent a7ddd80d09
commit 569beb0b36
14 changed files with 131 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/(app)/problems/[id]/@Bot/layout.tsx Normal file
View File

@ -0,0 +1,16 @@
import { Suspense } from "react";
import { Loading } from "@/components/loading";
interface BotLayoutProps {
children: React.ReactNode;
}
export default function BotLayout({ children }: BotLayoutProps) {
return (
<div className="flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
<Suspense fallback={<Loading />}>
{children}
</Suspense>
</div>
);
}

4
src/app/(app)/problems/[id]/@Bot/page.tsx
View File

@ -55,7 +55,7 @@ export default function Bot() {
);
return (
<div className="flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
<>
<div className="flex-1 relative">
{!messages.some(
(message) => message.role === "user" || message.role === "assistant"
@ -122,6 +122,6 @@ export default function Bot() {
</TooltipProvider>
</form>
</footer>
</div>
</>
);
}

20
src/app/(app)/problems/[id]/@Code/layout.tsx Normal file
View File

@ -0,0 +1,20 @@
import { Suspense } from "react";
import { Loading } from "@/components/loading";
import { WorkspaceEditorHeader } from "@/components/features/playground/workspace/editor/components/header";
import { WorkspaceEditorFooter } from "@/components/features/playground/workspace/editor/components/footer";
interface CodeLayoutProps {
children: React.ReactNode;
}
export default function CodeLayout({ children }: CodeLayoutProps) {
return (
<div className="flex flex-col h-full">
<WorkspaceEditorHeader className="border-b border-x border-muted bg-background" />
<Suspense fallback={<Loading />}>
{children}
</Suspense>
<WorkspaceEditorFooter />
</div>
);
}

12
src/app/(app)/problems/[id]/@Code/page.tsx
View File

@ -1,17 +1,11 @@
import { ProblemEditor } from "@/components/problem-editor";
import { WorkspaceEditorHeader } from "@/components/features/playground/workspace/editor/components/header";
import { WorkspaceEditorFooter } from "@/components/features/playground/workspace/editor/components/footer";
export default function CodePage() {
return (
<div className="flex flex-col h-full">
<WorkspaceEditorHeader className="border-b border-x border-muted bg-background" />
<div className="relative flex-1 border-x border-muted">
<div className="absolute w-full h-full">
<ProblemEditor />
</div>
<div className="relative flex-1 border-x border-muted">
<div className="absolute w-full h-full">
<ProblemEditor />
</div>
<WorkspaceEditorFooter />
</div>
);
}

16
src/app/(app)/problems/[id]/@Description/layout.tsx Normal file
View File

@ -0,0 +1,16 @@
import { Suspense } from "react";
import { Loading } from "@/components/loading";
interface DescriptionLayoutProps {
children: React.ReactNode;
}
export default function DescriptionLayout({ children }: DescriptionLayoutProps) {
return (
<div className="h-full flex flex-col">
<Suspense fallback={<Loading />}>
{children}
</Suspense>
</div>
);
}

4
src/app/(app)/problems/[id]/@Description/page.tsx
View File

@ -28,7 +28,7 @@ export default async function DescriptionPage({ params }: DescriptionPageProps)
}
return (
<div className="h-full flex flex-col">
<>
<div className="relative flex-1 border-x border-muted">
<div className="absolute h-full w-full">
<ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
@ -37,6 +37,6 @@ export default async function DescriptionPage({ params }: DescriptionPageProps)
</div>
</div>
<ProblemDescriptionFooter title={problem.title} />
</div>
</>
);
}

20
src/app/(app)/problems/[id]/@Details/layout.tsx
View File

@ -1,8 +1,16 @@
import { getUserLocale } from "@/i18n/locale";
import DetailsPage from "@/app/(app)/problems/[id]/@Details/page";
import { Suspense } from "react";
import { Loading } from "@/components/loading";
export default async function DetailsLayout() {
const locale = await getUserLocale();
return <DetailsPage locale={locale} />;
interface DetailsLayoutProps {
children: React.ReactNode;
}
export default async function DetailsLayout({ children }: DetailsLayoutProps) {
return (
<div className="flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
<Suspense fallback={<Loading />}>
{children}
</Suspense>
</div>
);
}

4
src/app/(app)/problems/[id]/@Details/page.tsx
View File

@ -78,7 +78,7 @@ export default function DetailsPage({ locale }: DetailsPageProps) {
};
return (
<div className="h-full flex flex-col border border-t-0 border-muted rounded-b-3xl bg-background">
<>
<div className="h-8 flex flex-none items-center px-2 py-1 border-b">
<Button
onClick={handleClick}
@ -206,6 +206,6 @@ export default function DetailsPage({ locale }: DetailsPageProps) {
</ScrollArea>
</div>
</div>
</div>
</>
);
}

16
src/app/(app)/problems/[id]/@Solutions/layout.tsx Normal file
View File

@ -0,0 +1,16 @@
import { Suspense } from "react";
import { Loading } from "@/components/loading";
interface SolutionsLayoutProps {
children: React.ReactNode;
}
export default async function SolutionsLayout({ children }: SolutionsLayoutProps) {
return (
<div className="flex flex-col h-full">
<Suspense fallback={<Loading />}>
{children}
</Suspense>
</div>
);
}

4
src/app/(app)/problems/[id]/@Solutions/page.tsx
View File

@ -28,7 +28,7 @@ export default async function SolutionsPage({ params }: SolutionsPageProps) {
}
return (
<div className="flex flex-col h-full">
<>
<div className="relative flex-1 border-x border-muted">
<div className="absolute h-full w-full">
<ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
@ -38,6 +38,6 @@ export default async function SolutionsPage({ params }: SolutionsPageProps) {
</div>
</div>
<ProblemSolutionFooter title={problem.title} />
</div>
</>
);
}

16
src/app/(app)/problems/[id]/@Submissions/layout.tsx Normal file
View File

@ -0,0 +1,16 @@
import { Suspense } from "react";
import { Loading } from "@/components/loading";
interface SubmissionsLayoutProps {
children: React.ReactNode;
}
export default function SubmissionsLayout({ children }: SubmissionsLayoutProps) {
return (
<div className="flex flex-col h-full px-3 border border-t-0 border-muted rounded-b-3xl bg-background">
<Suspense fallback={<Loading />}>
{children}
</Suspense>
</div>
);
}

4
src/app/(app)/problems/[id]/@Submissions/page.tsx
View File

@ -41,11 +41,11 @@ export default async function SubmissionsPage({ params }: SubmissionsPageProps)
const locale = await getUserLocale();
return (
<div className="px-3 flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
<>
<ScrollArea className="h-full">
<SubmissionsTable locale={locale} submissions={problem.submissions} />
<ScrollBar orientation="horizontal" />
</ScrollArea>
</div>
</>
);
}

16
src/app/(app)/problems/[id]/@Testcase/layout.tsx Normal file
View File

@ -0,0 +1,16 @@
import { Suspense } from "react";
import { Loading } from "@/components/loading";
interface TestcaseLayoutProps {
children: React.ReactNode;
}
export default function TestcaseLayout({ children }: TestcaseLayoutProps) {
return (
<div className="relative h-full border border-t-0 border-muted rounded-b-3xl bg-background">
<Suspense fallback={<Loading />}>
{children}
</Suspense>
</div>
);
}

10
src/app/(app)/problems/[id]/@Testcase/page.tsx
View File

@ -30,12 +30,10 @@ export default async function TestcasePage({ params }: TestcasePageProps) {
}
return (
<div className="relative h-full border border-t-0 border-muted rounded-b-3xl bg-background">
<div className="absolute h-full w-full">
<ScrollArea className="h-full">
<TestcaseCard testcases={problem.testcases} />
</ScrollArea>
</div>
<div className="absolute h-full w-full">
<ScrollArea className="h-full">
<TestcaseCard testcases={problem.testcases} />
</ScrollArea>
</div>
);
}