@violetprotocol/nudge-components
Version:
Components for Nudge's websites and applications.
17 lines (16 loc) • 1.5 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from "react";
const LENGTH = 40;
const STROKE_WIDTH = 6;
export const GaugeHorizontal = ({ className, color, bgColor, strokeWidth = STROKE_WIDTH, length = LENGTH, 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 (_jsx("div", { className: `${className ?? ""} w-[${length + strokeWidth}px]`, children: _jsxs("svg", { className: "relative z-0", width: length + strokeWidth, height: strokeWidth, viewBox: `0 0 ${length} ${strokeWidth}`, children: [_jsx("line", { className: `${bgColor?.includes("#") ? "" : bgColor ?? "stroke-neutral-200"}`, x1: 0, y1: strokeWidth / 2, x2: length, y2: strokeWidth / 2, fill: "none", stroke: `${bgColor?.includes("#") ? bgColor : ""}`, strokeWidth: strokeWidth, strokeLinecap: "round" }), percent && (_jsx("line", { className: `${color?.includes("#") ? "" : color ?? "stroke-primary-500"}`, x1: 0, y1: strokeWidth / 2, x2: displayedValue - 1
? strokeWidth / 2 +
((displayedValue - 1) / 99) * (length - strokeWidth / 2)
: 0, y2: strokeWidth / 2, fill: "none", stroke: `${color?.includes("#") ? color : ""}`, strokeWidth: strokeWidth, strokeLinecap: "round" }))] }) }));
};