@trellixio/roaster-coffee/lib/components/StatCard/StatCard.js

Beans' product component library

import * as React from 'react';
import { classNames } from '@/utils';
import { Tooltip } from '../Tooltip';
import { Icon } from '../Icon';
export const StatCard = React.forwardRef((props, ref) => {
    const { title, value, description, progressValue, progressLabel, className, style } = props;
    return (React.createElement("article", { ref: ref, className: classNames('card-stat', className), style: style },
        React.createElement("div", { className: "title-wrapper" },
            React.createElement("p", { className: "stat-title" },
                React.createElement("span", null, title),
                description && (React.createElement(Tooltip, { inline: true, label: description },
                    React.createElement(Icon, { className: "has-tooltip" },
                        React.createElement("i", { className: "fa-regular fa-circle-info" })))))),
        React.createElement("div", { className: "content" },
            React.createElement("div", null,
                React.createElement("span", { className: "stat-value" }, value),
                React.createElement("small", null, progressLabel)),
            progressValue >= 0 && (React.createElement("div", { className: "progress-container" },
                React.createElement("figure", { className: "progress circular" },
                    React.createElement("span", { className: "progress-level", "data-percent": value, style: { '--percent': progressValue } })))))));
});
StatCard.displayName = 'StatCard';