react-vite-themes
Version:
A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.
11 lines (10 loc) • 1.42 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
import { cn } from '../../../utils';
export const ProgressBar = ({ value, max = 100, variant = 'primary', size = 'md', showLabel = false, labelPosition = 'top', isAnimated = false, className, ...props }) => {
const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
const progressBarClasses = cn('progress-bar', `progress-bar--${variant}`, `progress-bar--${size}`, isAnimated && 'progress-bar--animated', className);
const progressFillClasses = cn('progress-bar__fill', `progress-bar__fill--${variant}`, isAnimated && 'progress-bar__fill--animated');
const labelClasses = cn('progress-bar__label', `progress-bar__label--${labelPosition}`);
return (_jsxs("div", { className: progressBarClasses, ...props, children: [showLabel && labelPosition === 'top' && (_jsx("div", { className: labelClasses, children: _jsxs("span", { className: "progress-bar__text", children: [value, "%"] }) })), _jsx("div", { className: "progress-bar__track", children: _jsx("div", { className: progressFillClasses, style: { width: `${percentage}%` }, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max }) }), showLabel && labelPosition === 'bottom' && (_jsx("div", { className: labelClasses, children: _jsxs("span", { className: "progress-bar__text", children: [value, "%"] }) }))] }));
};