Leaderboard

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

export type LeaderboardEntry = {
  name: string;
  /** Already formatted, for example "12,480". */
  value: string;
  /** Small text under the name. */
  detail?: string;
};

type LeaderboardProps = Omit<React.ComponentProps<"ol">, "children"> & {
  entries: LeaderboardEntry[];
  /** Unit read after each value by screen readers, for example "points". */
  unit?: string;
  /** Rank the viewer holds. That row gets a fill. */
  highlight?: number;
};

/**
 * Ranked rows: rank, name, value. Tabular figures keep the columns aligned.
 * The list is ordered, so the rank is also the list position for screen readers.
 */
export function Leaderboard({ entries, unit, highlight, className, ...props }: LeaderboardProps) {
  return (
    <ol
      data-slot="leaderboard"
      className={cn("m-0 flex w-full list-none flex-col gap-px p-0 text-sm", className)}
      {...props}
    >
      {entries.map((entry, i) => (
        <li
          key={i}
          aria-current={highlight === i + 1 ? "true" : undefined}
          className={cn("flex min-h-10 items-center gap-3 rounded-md px-2 py-1", highlight === i + 1 && "bg-muted")}
        >
          <span aria-hidden="true" className="w-5 text-right font-mono text-xs text-muted-foreground tabular-nums">
            {i + 1}
          </span>
          <span className="flex min-w-0 flex-1 flex-col">
            <span className="truncate">{entry.name}</span>
            {entry.detail && <span className="truncate text-xs text-muted-foreground">{entry.detail}</span>}
          </span>
          <span className="font-medium tabular-nums">
            {entry.value}
            {unit && <span className="sr-only"> {unit}</span>}
          </span>
        </li>
      ))}
    </ol>
  );
}