| import { CheckCircle2, XCircle, ChevronDown, ChevronUp } from "lucide-react"; |
| import { useState } from "react"; |
| import type { AngleSummary } from "@/types"; |
| import { ANGLE_DESCRIPTIONS } from "@/utils/constants"; |
|
|
| interface AngleCardProps { |
| summary: AngleSummary; |
| } |
|
|
| export function AngleCard({ summary }: AngleCardProps) { |
| const [expanded, setExpanded] = useState(false); |
|
|
| const statusColor = summary.detected |
| ? "text-emerald-400 border-emerald-500/30 bg-emerald-500/5" |
| : "text-red-400 border-red-500/30 bg-red-500/5"; |
|
|
| const scorePercent = Math.round(summary.bestScore * 100); |
|
|
| return ( |
| <div |
| className={[ |
| "rounded-xl border transition-all duration-200", |
| statusColor, |
| "hover:shadow-lg cursor-pointer", |
| ].join(" ")} |
| onClick={() => summary.detected && setExpanded((e) => !e)} |
| > |
| <div className="flex items-center gap-4 p-4"> |
| {/* Icon */} |
| <div className="flex-shrink-0"> |
| {summary.detected ? ( |
| <CheckCircle2 className="w-6 h-6 text-emerald-400" /> |
| ) : ( |
| <XCircle className="w-6 h-6 text-red-400" /> |
| )} |
| </div> |
| |
| {/* Info */} |
| <div className="flex-1 min-w-0"> |
| <div className="flex items-center gap-2 flex-wrap"> |
| <span className="font-semibold text-white text-sm">{summary.angle}</span> |
| {summary.detected && ( |
| <span className="text-xs px-2 py-0.5 rounded-full bg-emerald-500/20 text-emerald-300 font-medium"> |
| Detected |
| </span> |
| )} |
| {!summary.detected && ( |
| <span className="text-xs px-2 py-0.5 rounded-full bg-red-500/20 text-red-300 font-medium"> |
| Missing |
| </span> |
| )} |
| </div> |
| <p className="text-slate-500 text-xs mt-0.5 truncate"> |
| {ANGLE_DESCRIPTIONS[summary.angle]} |
| </p> |
| </div> |
| |
| {/* Score bar */} |
| {summary.detected && ( |
| <div className="flex-shrink-0 flex flex-col items-end gap-1"> |
| <span className="text-xs font-mono text-emerald-400">{scorePercent}%</span> |
| <div className="w-20 h-1.5 rounded-full bg-surface-500 overflow-hidden"> |
| <div |
| className="h-full rounded-full bg-emerald-400 transition-all duration-700" |
| style={{ width: `${scorePercent}%` }} |
| /> |
| </div> |
| </div> |
| )} |
| |
| {/* Expand toggle */} |
| {summary.detected && summary.detectedIn.length > 0 && ( |
| <div className="flex-shrink-0 text-slate-500"> |
| {expanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />} |
| </div> |
| )} |
| </div> |
| |
| {/* Expanded — show images and filenames */} |
| {expanded && summary.detectedIn.length > 0 && ( |
| <div className="px-4 pb-4 border-t border-emerald-500/10 pt-3 animate-fade-in"> |
| <p className="text-xs text-slate-400 mb-3 font-medium uppercase tracking-wider">Found in</p> |
| {summary.previewUrls.length > 0 ? ( |
| <div className={`grid gap-3 ${summary.previewUrls.length === 1 ? "grid-cols-1" : "grid-cols-2"}`}> |
| {summary.previewUrls.map((url, i) => ( |
| <div key={summary.detectedIn[i] ?? url} className="rounded-lg overflow-hidden border border-emerald-500/20"> |
| <img |
| src={url} |
| alt={summary.detectedIn[i]} |
| className="w-full object-cover max-h-52" |
| /> |
| <p className="text-xs text-slate-400 px-2 py-1.5 bg-surface-800 font-mono truncate"> |
| {summary.detectedIn[i]} |
| </p> |
| </div> |
| ))} |
| </div> |
| ) : ( |
| <div className="flex flex-col gap-1"> |
| {summary.detectedIn.map((fname) => ( |
| <div key={fname} className="flex items-center gap-2"> |
| <div className="w-1.5 h-1.5 rounded-full bg-emerald-400 flex-shrink-0" /> |
| <span className="text-sm text-slate-300 font-mono truncate">{fname}</span> |
| </div> |
| ))} |
| </div> |
| )} |
| </div> |
| )} |
| </div> |
| ); |
| } |
|
|
