"use client"

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

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

interface StatWidgetProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string
  value: string | number
  change?: number
  trend?: "up" | "down" | "neutral"
  changeLabel?: string
}

const StatWidget = React.forwardRef<HTMLDivElement, StatWidgetProps>(
  (
    { label, value, change, trend, changeLabel = "Since last period", className, ...props },
    ref
  ) => {
    const resolvedTrend = trend
      ? trend
      : change === undefined
      ? "neutral"
      : change > 0
      ? "up"
      : change < 0
      ? "down"
      : "neutral"

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

    const trendIcon =
      resolvedTrend === "up" ? (
        <ArrowUpRight className="h-3.5 w-3.5" />
      ) : resolvedTrend === "down" ? (
        <ArrowDownRight className="h-3.5 w-3.5" />
      ) : (
        <Minus className="h-3.5 w-3.5" />
      )

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

    return (
      <div
        ref={ref}
        className={cn(
          "flex flex-col gap-3 rounded-2xl border border-border bg-card p-5",
          className
        )}
        {...props}
      >
        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">
          {label}
        </p>
        <div className="flex items-end justify-between gap-4">
          <span className="text-4xl font-semibold text-foreground tabular-nums">
            {value}
          </span>
          {changeValue ? (
            <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",
                trendClass
              )}
            >
              {trendIcon}
              {changeValue}%
            </span>
          ) : null}
        </div>
        <p className="text-xs text-muted-foreground">{changeLabel}</p>
      </div>
    )
  }
)

StatWidget.displayName = "StatWidget"

export { StatWidget }
export type { StatWidgetProps }
Stat Widget

Dependencies

Files

Installation
