HighlightHighlight diffs and code

import { useId, useState, type ReactNode } from "react";

type Status = "open" | "merged" | "closed";
type PullRequest = {
  id: number;
  title: string;
  author: { name: string; avatar?: string };
  status: Status;
  additions: number;
  deletions: number;
};

const statusLabels = {
  open: "Ready for review",
  merged: "Merged",
  closed: "Closed",
} satisfies Record<Status, string>;

/** A searchable review queue with a custom action for each pull request. */
export function ReviewQueue({ items, renderAction }: {
  items: readonly PullRequest[];
  renderAction: (item: PullRequest) => ReactNode;
}) {
  const searchId = useId();
  const [query, setQuery] = useState("");
  const matches = items.filter(({ title, author }) =>
    `${title} ${author.name}`.toLowerCase().includes(query.toLowerCase())
  );

  return (
    <section aria-label="Pull requests">
      <label htmlFor={searchId}>Find a review</label>
      <input id={searchId} value={query}
        onChange={(event) => setQuery(event.currentTarget.value)} />
      <ul>
        {matches.map((pr) => (
          <li key={pr.id} className={`review review--${pr.status}`}>
            <a href={`/pull/${pr.id}`}>{pr.title}</a>
            <span>{statusLabels[pr.status]} · {pr.author.name}</span>
            <code>+{pr.additions} / −{pr.deletions}</code>
            {renderAction(pr)}
          </li>
        ))}
      </ul>
      {matches.length === 0 && <p>No reviews match “{query}”.</p>}
    </section>
  );
}

/**
 * An interface for a point in 2D space.
 */
interface Point {
  x: number;
  y: number;
}

/**
 * Calculates the distance between two points.
 * @param {Point} a - The first point.
 * @param {Point} b - The second point.
 * @returns The distance between a and b.
 */
function distance(a: Point, b: Point): number {
  const dx = a.x - b.x;
  const dy = a.y - b.y;
  return Math.hypot(dx, dy);
}

console.log(distance({ x: 0, y: 0 }, { x: 3, y: 4 }));