Stats band

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

export type BandStat = { value: string; label: string };

type StatsBandProps = React.ComponentProps<"section"> & {
  /** Three or four numbers. Keep the values short. */
  stats: BandStat[];
};

/**
 * A full-width band of big numbers between hairlines, with dividers between them.
 * Server component. The numbers sit in a description list, so a screen reader hears value and label together.
 */
export function StatsBand({ stats, className, ...props }: StatsBandProps) {
  return (
    <section data-slot="stats-band" className={cn("w-full border-y bg-background", className)} {...props}>
      <dl
        className={cn(
          "m-0 mx-auto grid max-w-6xl gap-px bg-border",
          stats.length >= 4 ? "grid-cols-2 md:grid-cols-4" : "sm:grid-cols-3",
        )}
      >
        {stats.map((s) => (
          <div key={s.label} className="flex flex-col-reverse gap-1 bg-background px-6 py-8 text-center">
            <dt className="text-xs text-muted-foreground">{s.label}</dt>
            <dd className="m-0 text-3xl font-medium tracking-tight tabular-nums sm:text-4xl">{s.value}</dd>
          </div>
        ))}
      </dl>
    </section>
  );
}