File size: 4,281 Bytes
2b62b0c b87cbc7 2b62b0c b87cbc7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | import { Card, CardContent, CardHeader, CardTitle } from "@pram/ui/components/card";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { formatLabel } from "@/lib/format";
interface Weakness {
type: "format" | "section" | "skill";
name: string;
totalQuestions: number;
accuracyPct: number;
}
interface WeaknessPanelProps {
weaknesses: Weakness[] | undefined;
recommendations: string[] | undefined;
}
function getTypeIcon(type: Weakness["type"]) {
switch (type) {
case "format":
return "quiz";
case "section":
return "folder";
case "skill":
return "psychology";
}
}
function getTypeLabel(type: Weakness["type"]) {
switch (type) {
case "format":
return "Format";
case "section":
return "Section";
case "skill":
return "Skill";
}
}
function getSeverityColor(pct: number) {
if (pct < 40) return "text-[var(--pomegranate-600)]";
if (pct < 60) return "text-[var(--lemon-700)]";
return "text-[var(--matcha-600)]";
}
export function WeaknessPanel({ weaknesses, recommendations }: WeaknessPanelProps) {
const hasData = weaknesses && weaknesses.length > 0;
return (
<Card className="clay-shadow bg-[var(--pure-white)] border-2 border-[var(--oat-border)] rounded-[var(--radius-xl)]">
<CardHeader>
<CardTitle className="text-lg font-headline font-bold text-[var(--clay-black)] flex items-center gap-2">
<MaterialIcon name="analytics" className="text-[var(--pomegranate-600)]" />
Area untuk Ditingkatkan
</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
{hasData ? (
<>
<div className="space-y-3">
{weaknesses.map((w, _i) => (
<div
key={`${w.type}-${w.name}`}
className="flex items-center gap-4 p-3 rounded-[var(--radius-md)] bg-[var(--warm-cream)] border-2 border-[var(--oat-border)]"
>
<div className="flex items-center justify-center w-10 h-10 rounded-[var(--radius-lg)] bg-[var(--oat-light)] shrink-0">
<MaterialIcon name={getTypeIcon(w.type)} className="text-[var(--warm-charcoal)]" />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="text-xs font-medium text-[var(--warm-silver)] uppercase tracking-wide">
{getTypeLabel(w.type)}
</span>
</div>
<div className="text-sm font-semibold text-[var(--clay-black)] truncate">
{formatLabel(w.name)}
</div>
</div>
<div className="text-right shrink-0">
<div className={`text-xl font-headline font-extrabold ${getSeverityColor(w.accuracyPct)}`}>
{w.accuracyPct}%
</div>
<div className="text-xs text-[var(--warm-silver)]">{w.totalQuestions} soal</div>
</div>
</div>
))}
</div>
{recommendations && recommendations.length > 0 && (
<div className="space-y-2">
<h4 className="text-sm font-semibold text-[var(--clay-black)]">Rekomendasi</h4>
<ul className="space-y-2">
{recommendations.map((rec, i) => (
<li key={i} className="flex items-start gap-2 text-sm text-[var(--warm-charcoal)]">
<MaterialIcon name="lightbulb" className="text-[var(--lemon-700)] shrink-0 mt-0.5" />
<span>{rec}</span>
</li>
))}
</ul>
</div>
)}
</>
) : (
<div className="text-center py-8 text-[var(--warm-charcoal)]">
<MaterialIcon name="insights" className="text-5xl text-[var(--warm-silver)] mx-auto mb-3" />
<p className="font-semibold">Belum cukup data</p>
<p className="text-sm mt-1">Selesaikan lebih banyak latihan untuk melihat analisis kelemahan.</p>
</div>
)}
</CardContent>
</Card>
);
}
|