"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
import { SparklineChart } from "@/components/ui/sparkline-chart"

interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string
  value: number | string
  change?: number
  trend?: "up" | "down" | "neutral"
  prefix?: string
  suffix?: string
  duration?: number
  decimals?: number
  sparklineData?: number[]
  trendLabel?: string
  icon?: React.ReactNode
}

const TrendUpIcon = ({ className }: { className?: string }) => (
  <svg
    aria-hidden="true"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.5"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <path d="M7 17l10-10" />
    <path d="M8 7h9v9" />
  </svg>
)

const TrendDownIcon = ({ className }: { className?: string }) => (
  <svg
    aria-hidden="true"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.5"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <path d="M7 7l10 10" />
    <path d="M8 17h9V8" />
  </svg>
)

const TrendNeutralIcon = ({ className }: { className?: string }) => (
  <svg
    aria-hidden="true"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="1.5"
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <path d="M5 12h14" />
  </svg>
)

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>(
  (
    {
      label,
      value,
      change,
      trend,
      prefix,
      suffix,
      duration = 1800,
      decimals = 0,
      sparklineData,
      trendLabel = "vs previous period",
      icon,
      className,
      ...props
    },
    ref
  ) => {
    const resolvedTrend = trend
      ? trend
      : change === undefined
      ? "neutral"
      : change > 0
      ? "up"
      : change < 0
      ? "down"
      : "neutral"

    const isNumeric = typeof value === "number"
    const animatedValue = useCountUp(isNumeric ? value : 0, duration, decimals)
    const displayValue = isNumeric ? animatedValue : value

    const changeValue = change !== undefined ? Math.abs(change).toFixed(1) : null

    const trendIcon =
      resolvedTrend === "up" ? (
        <TrendUpIcon className="h-3.5 w-3.5" />
      ) : resolvedTrend === "down" ? (
        <TrendDownIcon className="h-3.5 w-3.5" />
      ) : (
        <TrendNeutralIcon className="h-3.5 w-3.5" />
      )

    const trendTextClass =
      resolvedTrend === "up"
        ? "text-primary"
        : resolvedTrend === "down"
        ? "text-muted-foreground"
        : "text-foreground"

    return (
      <div
        ref={ref}
        className={cn(
          "relative overflow-hidden rounded-2xl border border-border bg-card p-6 text-left",
          className
        )}
        {...props}
      >
        <div className="flex flex-col gap-4">
          <div className="flex items-start justify-between gap-4">
            <div className="flex items-start gap-3">
              {icon ? (
                <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-border bg-muted text-foreground">
                  {icon}
                </div>
              ) : null}
              <div className="space-y-2">
                <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
                  {label}
                </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>

            {sparklineData?.length ? (
              <div className="min-w-[140px]">
                <SparklineChart data={sparklineData} className="text-primary" />
              </div>
            ) : null}
          </div>

          <div className="flex items-center justify-between">
            <span className="text-sm text-muted-foreground">{trendLabel}</span>
            <span
              className={cn(
                "inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2.5 py-1 text-xs font-semibold",
                trendTextClass
              )}
            >
              {trendIcon}
              {changeValue ? `${changeValue}%` : "Stable"}
            </span>
          </div>
        </div>
      </div>
    )
  }
)

StatCard.displayName = "StatCard"

export { StatCard }
Stat Card

Dependencies

Files

Installation
