nexpi-ui/lib/Progress.js

An elegant and minimalist Next.js 14 component library

"use client";
import { __assign, __rest } from "tslib";
import { useRef, useEffect } from "react";
import React from 'react';
var getColor = function (variant) {
    switch (variant) {
        case 'primary':
            return '--nxp-primary-color';
        case 'secondary':
            return '--nxp-secondary-color';
        case 'success':
            return '--nxp-green';
        case 'warning':
            return '--nxp-orange';
        case 'danger':
            return '--nxp-red';
        case 'info':
            return '--nxp-violet';
        case 'notice':
            return '--nxp-blue';
        default:
            return '--nxp-secondary-color)';
    }
};
var Progress = function (_a) {
    var props = __rest(_a, []);
    var canvasRef = useRef(null);
    useEffect(function () {
        var canvas = canvasRef.current;
        if (!canvas)
            return;
        var ctx = canvas.getContext('2d');
        if (!ctx)
            return;
        var computedStyle = getComputedStyle(document.documentElement);
        var color = computedStyle.getPropertyValue(getColor(props.variant || 'secondary'));
        if (ctx) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = color.trim();
            ctx.fillRect(0, 0, props.percent * 3, 15);
        }
    }, [props.percent]);
    return React.createElement("div", { style: {
            margin: '1rem',
            backgroundColor: 'var(--nxp-secondary-shadow-color)',
            borderRadius: 'var(--nxp-border-radius)', height: '15px',
            width: '300px', overflow: 'hidden'
        } },
        React.createElement("canvas", __assign({ ref: canvasRef }, props)));
};
export default Progress;
//# sourceMappingURL=Progress.js.map