diff --git a/src/components/RadialGauge.jsx b/src/components/RadialGauge.jsx new file mode 100644 index 0000000..c99eebd --- /dev/null +++ b/src/components/RadialGauge.jsx @@ -0,0 +1,60 @@ +import React from 'react' + +export default function RadialGauge({ score, size = 80, strokeWidth = 7 }) { + const center = size / 2 + const radius = center - strokeWidth + const circumference = 2 * Math.PI * radius + + const validScore = typeof score === 'number' && !isNaN(score) ? Math.min(100, Math.max(0, score)) : null + const offset = validScore !== null ? circumference - (validScore / 100) * circumference : circumference + + let color = 'var(--text3)' + let bgStroke = 'var(--border)' + + if (validScore !== null) { + if (validScore >= 70) color = 'var(--green, #22c55e)' + else if (validScore >= 40) color = 'var(--amber, #f59e0b)' + else color = 'var(--red, #ef4444)' + } + + return ( +