@violetprotocol/nudge-components
Version:
Components for Nudge's websites and applications.
50 lines (49 loc) • 1.29 kB
JavaScript
"use client";
import { jsxs, jsx } from "react/jsx-runtime";
import { useState, useEffect } from "react";
const SIZE = 40;
const RADIUS = 15;
const STROKE_WIDTH = 6;
const CIRCUMFERENCE = RADIUS * 2 * Math.PI;
const GaugeCircular = ({
color,
bgColor,
percent
}) => {
const [displayedValue, setDisplayedValue] = useState(0);
useEffect(() => {
setDisplayedValue(percent);
}, [setDisplayedValue, percent]);
return /* @__PURE__ */ jsxs("svg", { width: SIZE, height: SIZE, viewBox: `0 0 ${SIZE} ${SIZE}`, children: [
/* @__PURE__ */ jsx(
"circle",
{
cx: SIZE / 2,
cy: SIZE / 2,
stroke: bgColor ?? "#13141c",
fill: "none",
r: RADIUS,
strokeWidth: 6
}
),
/* @__PURE__ */ 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"
}
)
] });
};
export {
GaugeCircular
};
//# sourceMappingURL=GaugeCircular.esm.js.map