"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

interface MetricBarProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string
  value: string | number
  percent: number
  helperText?: string
}

function clampPercent(percent: number) {
  if (Number.isNaN(percent)) return 0
  return Math.min(Math.max(percent, 0), 100)
}

const MetricBar = React.forwardRef<HTMLDivElement, MetricBarProps>(
  ({ label, value, percent, helperText, className, ...props }, ref) => {
    const clamped = clampPercent(percent)

    return (
      <div
        ref={ref}
        className={cn(
          "flex flex-col gap-3 rounded-xl border border-border bg-card p-4",
          className
        )}
        {...props}
      >
        <div className="flex items-start justify-between gap-4">
          <div className="space-y-1">
            <p className="text-sm font-medium text-foreground">{label}</p>
            {helperText ? (
              <p className="text-xs text-muted-foreground">{helperText}</p>
            ) : null}
          </div>
          <div className="text-sm font-semibold text-foreground">{value}</div>
        </div>
        <div className="flex items-center gap-3">
          <div className="h-2 w-full rounded-full bg-muted">
            <div
              className="h-full rounded-full bg-primary transition-all"
              style={{ width: `${clamped}%` }}
            />
          </div>
          <span className="text-xs font-semibold text-muted-foreground tabular-nums">
            {clamped}%
          </span>
        </div>
      </div>
    )
  }
)

MetricBar.displayName = "MetricBar"

export { MetricBar }
Metric Bar

Dependencies

Files

Installation
