wulf-pulse/components/mobile/ConfidenceBadge.tsx
lorentz 9c1a74009b feat(06-02): add AnalyzerStagePips, ConfidenceBadge, AnalyzerRowSkeleton, AnalyzerFeedRow components
- AnalyzerStagePips: 3-dot stage indicator with caret separators, sr-only accessibility label
- ConfidenceBadge: High/Medium/Low buckets (0.85/0.65) with green/amber/slate tones, dark mode
- AnalyzerRowSkeleton: Card-wrapped skeleton matching row shape (no border-l-4 per D-11)
- AnalyzerFeedRow: Full card row with header/title/summary/footer, Link to /mobile/analyzer/[id]
2026-05-03 21:30:17 -04:00

39 lines
1 KiB
TypeScript

'use client';
/* ConfidenceBadge — phase 06 (ANL-02).
* Purpose: Bucketed confidence label — High (>=0.85) / Medium (>=0.65) / Low (<0.65).
* Renders nothing when score is null. Per D-15 / D-16.
* Props: see ConfidenceBadgeProps. */
import { Badge } from '@/components/ui/badge';
export interface ConfidenceBadgeProps {
score: number | null;
}
export function ConfidenceBadge({ score }: ConfidenceBadgeProps) {
if (score === null) return null;
let label: string;
let className: string;
if (score >= 0.85) {
label = 'High';
className = 'bg-green-500/10 text-green-700 dark:text-green-400';
} else if (score >= 0.65) {
label = 'Medium';
className = 'bg-amber-500/10 text-amber-700 dark:text-amber-400';
} else {
label = 'Low';
className = 'bg-slate-500/10 text-slate-600 dark:text-slate-400';
}
return (
<Badge
variant="outline"
className={`text-[10px] px-1.5 py-0.5 border-0 ${className}`}
aria-label={`Confidence: ${label}`}
>
{label}
</Badge>
);
}