Stat row

import * as React from "react";
import { cn } from "@/lib/utils";

type StatRowProps = React.ComponentProps<"dl">;

/**
 * A row of stats in one frame, split by shared hairlines. Wraps to two columns on phones.
 * Each cell draws its right and bottom edge; the inner grid hangs 1px over the frame so the outer edges hide.
 */
export function StatRow({ className, children, ...props }: StatRowProps) {
  return (
    <div data-slot="stat-row" className={cn("w-full overflow-hidden rounded-lg border bg-background", className)}>
      <dl className="m-0 -mr-px -mb-px grid grid-cols-2 sm:auto-cols-fr sm:grid-flow-col" {...props}>
        {children}
      </dl>
    </div>
  );
}

type StatProps = Omit<React.ComponentProps<"div">, "children"> & {
  /** What the number measures. */
  label: string;
  /** The number, already formatted. */
  value: React.ReactNode;
  /** Small mono note under the value, for example a change. */
  note?: string;
};

export function Stat({ label, value, note, className, ...props }: StatProps) {
  return (
    <div data-slot="stat" className={cn("flex flex-col gap-1 border-r border-b p-4", className)} {...props}>
      <dt className="text-sm text-muted-foreground">{label}</dt>
      <dd className="m-0 text-2xl font-medium tracking-tight [overflow-wrap:anywhere] tabular-nums">{value}</dd>
      {note && <dd className="m-0 font-mono text-xs text-muted-foreground">{note}</dd>}
    </div>
  );
}