@vectara/vectara-ui/lib/components/durationBar/DurationBar.js

Vectara's design system, codified as a React and Sass component library

import { jsx as _jsx } from "react/jsx-runtime";
import classNames from "classnames";
export const DURATION_BAR_COLOR = [
    "accent",
    "primary",
    "danger",
    "warning",
    "success",
    "neutral",
    "subdued",
    "medium"
];
const DEFAULT_MIN_BAR_WIDTH_PX = 4;
export const VuiDurationBar = ({ window, start, end, color, minBarWidthPx = DEFAULT_MIN_BAR_WIDTH_PX, className }) => {
    // Clamp the bar to the window boundaries.
    const clampedStart = Math.max(0, Math.min(start, window));
    const clampedEnd = Math.max(0, Math.min(end, window));
    const leftPercent = (clampedStart / window) * 100;
    const widthPercent = Math.max(0, ((clampedEnd - clampedStart) / window) * 100);
    const classes = classNames(className, "vuiDurationBar", `vuiDurationBar--${color}`);
    return (_jsx("div", Object.assign({ className: classes }, { children: _jsx("div", { className: "vuiDurationBar__bar", style: { left: `${leftPercent}%`, width: `max(${widthPercent}%, ${minBarWidthPx}px)` } }) })));
};