@violetprotocol/nudge-components
Version:
Components for Nudge's websites and applications.
16 lines (15 loc) • 1.1 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
const SIZE = 40;
const RADIUS = 15;
const STROKE_WIDTH = 6;
const CIRCUMFERENCE = RADIUS * 2 * Math.PI;
export const GaugeCircular = ({ color, bgColor, percent, }) => {
// Use a useState to update the value after first display to always animate
const [displayedValue, setDisplayedValue] = useState(0);
useEffect(() => {
setDisplayedValue(percent);
}, [setDisplayedValue, percent]);
return (_jsxs("svg", { width: SIZE, height: SIZE, viewBox: `0 0 ${SIZE} ${SIZE}`, children: [_jsx("circle", { cx: SIZE / 2, cy: SIZE / 2, stroke: bgColor ?? "#13141c", fill: "none", r: RADIUS, strokeWidth: 6 }), _jsx("circle", { className: "transition-[stroke-dasharray] duration-[2000ms]", cx: SIZE / 2, cy: SIZE / 2, stroke: color ?? "#12b981", fill: "none", transform: "scale(-1 1) translate(-40 0) rotate(270, 20, 20)", r: RADIUS, strokeDasharray: `${(displayedValue / 100) * CIRCUMFERENCE} 1000`, strokeWidth: STROKE_WIDTH, strokeLinecap: "round" })] }));
};