ProgressRing.tsx
696 bytes
| 1 | import type { CSSProperties } from "react"; |
|---|---|
| 2 | |
| 3 | interface ProgressRingProps { |
| 4 | value: number; |
| 5 | size?: "small" | "medium" | "large"; |
| 6 | label?: string; |
| 7 | light?: boolean; |
| 8 | } |
| 9 | |
| 10 | export function ProgressRing({ value, size = "medium", label = "coverage", light = false }: ProgressRingProps) { |
| 11 | const safeValue = Math.min(100, Math.max(0, value)); |
| 12 | return ( |
| 13 | <div |
| 14 | className={`progress-ring progress-ring-${size} ${light ? "progress-ring-light" : ""}`} |
| 15 | style={{ "--progress": `${safeValue * 3.6}deg` } as CSSProperties} |
| 16 | role="img" |
| 17 | aria-label={`${safeValue}% ${label}`} |
| 18 | > |
| 19 | <div> |
| 20 | <strong>{safeValue}</strong> |
| 21 | <span>%</span> |
| 22 | </div> |
| 23 | </div> |
| 24 | ); |
| 25 | } |
| 26 | |