Tag list

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

type TagListProps = Omit<React.ComponentProps<"ul">, "children"> & {
  /** The tags, in the order they should show. */
  tags: string[];
  /** How many tags to show before the rest collapse into a count. */
  max?: number;
  /** Accessible name for the list. */
  label?: string;
};

/**
 * Tags that wrap onto as many lines as they need. Past `max`, the rest collapse
 * into a "+N" chip whose title lists them, and the full list stays in the markup
 * for screen readers.
 */
export function TagList({ tags, max = 4, label = "Tags", className, ...props }: TagListProps) {
  const shown = tags.slice(0, max);
  const hidden = tags.slice(max);
  const chip = "inline-flex h-6 items-center rounded-full border border-border px-2.5 text-xs whitespace-nowrap";

  return (
    <ul aria-label={label} className={cn("m-0 flex list-none flex-wrap gap-1.5 p-0", className)} {...props}>
      {shown.map((tag, i) => (
        <li key={i} className={cn(chip, "bg-muted text-foreground")}>
          {tag}
        </li>
      ))}
      {hidden.length > 0 && (
        <li title={hidden.join(", ")} className={cn(chip, "font-mono text-muted-foreground tabular-nums")}>
          <span aria-hidden="true">+{hidden.length}</span>
          <span className="sr-only">{`and ${hidden.length} more: ${hidden.join(", ")}`}</span>
        </li>
      )}
    </ul>
  );
}