File size: 2,973 Bytes
38bc0dc | 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 | import { motion, AnimatePresence } from "framer-motion";
import RiskGauge from "./RiskGauge";
import type { ScoreResult } from "../api";
interface AnalyticsHUDProps {
result: ScoreResult | null;
}
const levelColor: Record<string, string> = {
Low: "var(--titanium)",
Medium: "var(--amber)",
High: "var(--ember)",
};
export default function AnalyticsHUD({ result }: AnalyticsHUDProps) {
return (
<AnimatePresence>
{result && !result.error && (
<motion.div
key="hud"
className={`glass-panel hud-panel ${result.risk_level === "High" ? "hud-pulse" : ""}`}
initial={{ opacity: 0, clipPath: "inset(0 100% 0 0)", y: -24, skewX: -8 }}
animate={{ opacity: 1, clipPath: "inset(0 0% 0 0)", y: 0, skewX: 0 }}
exit={{ opacity: 0, clipPath: "inset(0 0 0 100%)", y: -10 }}
transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
>
<div className="hud-header">
<span className="glow-text-amber hud-label aberrate">// ANALYTICS HUD</span>
<span className="hud-header-line" />
</div>
<div className="hud-grid">
<RiskGauge score={result.risk_score} />
<div className="hud-right">
<motion.div
className="hud-badge"
style={{
color: levelColor[result.risk_level],
borderColor: levelColor[result.risk_level],
}}
initial={{ opacity: 0, scale: 0.6 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.5, type: "spring", stiffness: 300, damping: 16 }}
>
{result.risk_level.toUpperCase()} RISK
</motion.div>
<motion.div
className="hud-confidence"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.7 }}
>
confidence {(result.confidence * 100).toFixed(0)}%
</motion.div>
<motion.ul
className="hud-factors"
initial="hidden"
animate="visible"
variants={{
hidden: {},
visible: { transition: { staggerChildren: 0.12, delayChildren: 0.8 } },
}}
>
{result.top_risk_factors.map((factor, i) => (
<motion.li
key={i}
variants={{
hidden: { opacity: 0, x: -18, filter: "blur(4px)" },
visible: { opacity: 1, x: 0, filter: "blur(0px)" },
}}
>
<span className="hud-factor-marker">▸</span> {factor}
</motion.li>
))}
</motion.ul>
</div>
</div>
</motion.div>
)}
</AnimatePresence>
);
}
|