Stat card

import * as React from "react";
import { ArrowDownRightIcon, ArrowUpRightIcon, MinusIcon } from "lucide-react";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

type Trend = "up" | "down" | "flat";

type StatCardProps = Omit<React.ComponentProps<typeof Card>, "children"> & {
  /** What the number measures, for example "Monthly visitors". */
  label: string;
  /** The number, already formatted. */
  value: React.ReactNode;
  /** Change text next to the trend icon, for example "+12% vs last month". */
  delta?: string;
  /** Direction of the change. Drawn as an icon, never as a colour. */
  trend?: Trend;
  /** One quiet line at the bottom, for example the period or the source. */
  footnote?: string;
  /** An icon or small element shown top right. */
  icon?: React.ReactNode;
};

const TREND_ICON = { up: ArrowUpRightIcon, down: ArrowDownRightIcon, flat: MinusIcon } as const;
const TREND_TEXT = { up: "Up", down: "Down", flat: "No change" } as const;

/**
 * A number with its label, an optional change and a footnote.
 * Monochrome by design: the arrow says the direction, the text says how much.
 */
export function StatCard({ label, value, delta, trend = "flat", footnote, icon, className, ...props }: StatCardProps) {
  const TrendIcon = TREND_ICON[trend];
  return (
    <Card size="sm" className={cn("gap-2", className)} {...props}>
      <CardContent className="flex flex-col gap-2">
        <div className="flex items-start justify-between gap-3">
          <p className="m-0 text-sm text-muted-foreground">{label}</p>
          {icon && (
            <span
              aria-hidden="true"
              className="inline-grid size-7 shrink-0 place-items-center rounded-sm bg-muted text-foreground [&_svg]:size-4"
            >
              {icon}
            </span>
          )}
        </div>
        <p className="m-0 text-2xl font-semibold tracking-tight tabular-nums">{value}</p>
        {delta && (
          <p className="m-0 inline-flex items-center gap-1 text-sm text-muted-foreground">
            <TrendIcon className="size-3.5" aria-hidden="true" />
            <span className="sr-only">{TREND_TEXT[trend]}: </span>
            {delta}
          </p>
        )}
        {footnote && <p className="m-0 text-xs text-muted-foreground">{footnote}</p>}
      </CardContent>
    </Card>
  );
}