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

feat(analysis): wrap analysis panel with PanelLayout and ScrollArea

Browse Source
This commit is contained in:
cfngc4594 2025-06-21 11:14:24 +08:00
parent f1882e5410
commit b52d96b645
1 changed files with 50 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
src/features/problems/analysis/components/panel.tsx
View File

@ -7,7 +7,12 @@ import {
CardFooter,
} from "@/components/ui/card";
import prisma from "@/lib/prisma";
import { ChartDataPoint, CodeAnalysisRadarChart } from "./radar-chart";
import {
ChartDataPoint,
CodeAnalysisRadarChart,
} from "@/features/problems/analysis/components/radar-chart";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { PanelLayout } from "@/features/problems/layouts/panel-layout";
export const description = "A server component to fetch code analysis data.";
@ -68,46 +73,51 @@ export const AnalysisPanel = async ({ submissionId }: AnalysisPanelProps) => {
];
return (
<Card className="w-full max-w-2xl mx-auto shadow-lg rounded-xl overflow-hidden border-0 bg-background/50 backdrop-blur-sm animate-fade-in">
<CardHeader className="items-center pb-2 space-y-1 px-6 pt-6">
<CardTitle className="text-2xl font-bold bg-gradient-to-r from-primary to-foreground bg-clip-text text-transparent">
Code Analysis
</CardTitle>
<CardDescription className="text-muted-foreground">
Detailed evaluation of your code submission
</CardDescription>
</CardHeader>
<CardContent className="p-6">
<CodeAnalysisRadarChart chartData={chartData} />
</CardContent>
<PanelLayout>
<ScrollArea className="h-full">
<Card className="w-full max-w-2xl mx-auto shadow-lg rounded-xl overflow-hidden border-0 bg-background/50 backdrop-blur-sm animate-fade-in">
<CardHeader className="items-center pb-2 space-y-1 px-6 pt-6">
<CardTitle className="text-2xl font-bold bg-gradient-to-r from-primary to-foreground bg-clip-text text-transparent">
Code Analysis
</CardTitle>
<CardDescription className="text-muted-foreground">
Detailed evaluation of your code submission
</CardDescription>
</CardHeader>
<CardContent className="p-6">
<CodeAnalysisRadarChart chartData={chartData} />
</CardContent>
<CardFooter className="flex-col items-start gap-4 p-6 pt-0">
<div className="w-full space-y-3">
<div className="flex justify-between text-sm font-medium">
<span className="text-muted-foreground">Overall Score</span>
<span className="text-primary">
{codeAnalysisData.overallScore ?? "N/A"}
<span className="text-muted-foreground">/100</span>
</span>
</div>
<div className="relative h-2.5 w-full overflow-hidden rounded-full bg-muted">
<div
className="h-full bg-gradient-to-r from-primary to-purple-500 rounded-full transition-all duration-700 ease-out"
style={{
width: `${codeAnalysisData.overallScore ?? 0}%`,
transitionProperty: "width",
}}
/>
</div>
</div>
<CardFooter className="flex-col items-start gap-4 p-6 pt-0">
<div className="w-full space-y-3">
<div className="flex justify-between text-sm font-medium">
<span className="text-muted-foreground">Overall Score</span>
<span className="text-primary">
{codeAnalysisData.overallScore ?? "N/A"}
<span className="text-muted-foreground">/100</span>
</span>
</div>
<div className="relative h-2.5 w-full overflow-hidden rounded-full bg-muted">
<div
className="h-full bg-gradient-to-r from-primary to-purple-500 rounded-full transition-all duration-700 ease-out"
style={{
width: `${codeAnalysisData.overallScore ?? 0}%`,
transitionProperty: "width",
}}
/>
</div>
</div>
<div className="text-muted-foreground bg-muted/40 p-4 rounded-lg w-full border">
<h3 className="font-medium mb-2 text-foreground">Feedback</h3>
<p className="whitespace-pre-wrap leading-relaxed">
{codeAnalysisData.feedback}
</p>
</div>
</CardFooter>
</Card>
<div className="text-muted-foreground bg-muted/40 p-4 rounded-lg w-full border">
<h3 className="font-medium mb-2 text-foreground">Feedback</h3>
<p className="whitespace-pre-wrap leading-relaxed">
{codeAnalysisData.feedback}
</p>
</div>
</CardFooter>
</Card>
<ScrollBar orientation="horizontal" />
</ScrollArea>
</PanelLayout>
);
};