- 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]
39 lines
1 KiB
TypeScript
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>
|
|
);
|
|
}
|