"use client"

import * as React from "react"

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

interface MetricDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
  label?: string
  value: number
  unit?: string
  duration?: number
  decimals?: number
  comparisonValue?: string
  comparisonLabel?: string
}

function useCountUp(value: number, duration: number, decimals: number) {
  const [count, setCount] = React.useState(0)

  React.useEffect(() => {
    const startTime = performance.now()
    let frameId = 0

    const tick = (now: number) => {
      const elapsed = now - startTime
      const progress = Math.min(elapsed / duration, 1)
      const eased = 1 - Math.pow(1 - progress, 3)
      setCount(value * eased)

      if (progress < 1) {
        frameId = requestAnimationFrame(tick)
      }
    }

    frameId = requestAnimationFrame(tick)

    return () => cancelAnimationFrame(frameId)
  }, [value, duration])

  return decimals > 0 ? count.toFixed(decimals) : Math.round(count).toString()
}

const MetricDisplay = React.forwardRef<HTMLDivElement, MetricDisplayProps>(
  (
    {
      label,
      value,
      unit,
      duration = 1600,
      decimals = 0,
      comparisonValue,
      comparisonLabel = "Compared to",
      className,
      ...props
    },
    ref
  ) => {
    const animatedValue = useCountUp(value, duration, decimals)

    return (
      <div
        ref={ref}
        className={cn(
          "flex flex-col gap-3 rounded-2xl border border-border bg-card p-6 text-left",
          className
        )}
        {...props}
      >
        {label ? (
          <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
            {label}
          </p>
        ) : null}
        <div className="flex items-end gap-2">
          <span className="text-5xl font-semibold text-foreground tabular-nums">
            {animatedValue}
          </span>
          {unit ? (
            <span className="pb-1 text-xl font-semibold text-secondary-foreground">
              {unit}
            </span>
          ) : null}
        </div>
        {comparisonValue ? (
          <div className="flex flex-wrap items-center gap-2 text-sm">
            <span className="text-muted-foreground">{comparisonLabel}</span>
            <span className="font-semibold text-foreground">
              {comparisonValue}
            </span>
          </div>
        ) : null}
      </div>
    )
  }
)

MetricDisplay.displayName = "MetricDisplay"

export { MetricDisplay }
export type { MetricDisplayProps }
Metric Display

Dependencies

Files

Installation
