15 lines
926 B
TypeScript
15 lines
926 B
TypeScript
export function GaugeChart({ value, label }: { value: number; label: string }) {
|
|
const rotation = Math.min(180, Math.max(0, value * 1.8));
|
|
return (
|
|
<div className="text-center">
|
|
<div className="relative mx-auto h-32 w-64 overflow-hidden">
|
|
<div className="absolute inset-x-0 top-0 h-64 rounded-full border-[24px] border-forest/10 dark:border-white/10" />
|
|
<div className="absolute inset-x-0 top-0 h-64 rounded-full border-[24px] border-transparent border-l-mint border-t-mint" style={{ transform: `rotate(${rotation - 135}deg)` }} />
|
|
<div className="absolute bottom-0 left-1/2 h-1 w-24 origin-left rounded-full bg-ink dark:bg-paper" style={{ transform: `rotate(${rotation - 180}deg)` }} />
|
|
</div>
|
|
<p className="font-display text-4xl text-forest dark:text-mint">{value}%</p>
|
|
<p className="text-sm font-semibold text-ink/60 dark:text-paper/60">{label}</p>
|
|
</div>
|
|
);
|
|
}
|