"use client"

import * as React from "react"
import { ArrowDownRight, ArrowUpRight } from "lucide-react"

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

interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
  title: string
  value: number
  change: number
  label?: string
  prefix?: string
  suffix?: string
  duration?: number
  decimals?: number
}

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)
      const nextValue = value * eased
      setCount(nextValue)

      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 StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(
  (
    {
      title,
      value,
      change,
      label = "vs previous period",
      prefix,
      suffix,
      duration = 1800,
      decimals = 0,
      className,
      ...props
    },
    ref
  ) => {
    const displayValue = useCountUp(value, duration, decimals)
    const isPositive = change >= 0
    const changeValue = Math.abs(change).toFixed(1)

    return (
      <div
        ref={ref}
        className={cn(
          "relative overflow-hidden rounded-2xl border border-border bg-card p-6 text-left",
          className
        )}
        {...props}
      >
        <div className="space-y-4">
          <div className="space-y-1">
            <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
              {title}
            </p>
            <div className="flex items-end gap-2">
              {prefix ? (
                <span className="text-xl font-semibold text-muted-foreground">
                  {prefix}
                </span>
              ) : null}
              <span className="text-4xl font-semibold text-foreground tabular-nums">
                {displayValue}
              </span>
              {suffix ? (
                <span className="text-xl font-semibold text-muted-foreground">
                  {suffix}
                </span>
              ) : null}
            </div>
          </div>

          <div className="flex items-center justify-between">
            <span className="text-sm text-muted-foreground">{label}</span>
            <span
              className={cn(
                "inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-semibold",
                isPositive
                  ? "border-primary/30 bg-muted text-primary"
                  : "border-border bg-muted text-muted-foreground"
              )}
            >
              {isPositive ? (
                <ArrowUpRight className="h-3.5 w-3.5" />
              ) : (
                <ArrowDownRight className="h-3.5 w-3.5" />
              )}
              {changeValue}%
            </span>
          </div>
        </div>

      </div>
    )
  }
)

StatCard.displayName = "StatCard"

export { StatCard }
Stat Card

Dependencies

Files

Installation
