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

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