36 lines · 1.4 KB
import type { CodeSearchPage } from "~/lib/code-intel";
import { Button } from "~/ui/Button";

type Props = Pick<CodeSearchPage, "page" | "hasMore" | "total" | "totalCapped"> & {
  pageSize: number;
  onPage: (page: number) => void;
};

/** "1–20 of 134 files" plus Previous/Next; the count is capped, so a broad query reads "1,000+". */
export function CodeSearchPager({ page, hasMore, total, totalCapped, pageSize, onPage }: Props) {
  if (total === 0) return null;
  const first = (page - 1) * pageSize + 1;
  const last = Math.min(page * pageSize, totalCapped ? page * pageSize : total);
  const totalLabel = `${total.toLocaleString()}${totalCapped ? "+" : ""}`;
  return (
    <nav
      aria-label="Code search pages"
      className="flex items-center justify-between gap-3 border-t border-kumo-hairline px-4 py-3 text-xs"
    >
      <span className="text-kumo-subtle">
        {first.toLocaleString()}–{last.toLocaleString()} of {totalLabel} file{total === 1 ? "" : "s"}
      </span>
      {(page > 1 || hasMore) && (
        <div className="flex gap-2">
          <Button size="sm" variant="secondary" disabled={page <= 1} onClick={() => onPage(page - 1)}>
            Previous
          </Button>
          <Button size="sm" variant="secondary" disabled={!hasMore} onClick={() => onPage(page + 1)}>
            Next
          </Button>
        </div>
      )}
    </nav>
  );
}