# All files / src/components/ui Pagination.tsx

90.9% Statements 10/11
85.71% Branches 6/7
100% Functions 5/5
100% Lines 9/9

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56

    118x

    11x

    11x

    1x

    49x
    49x
    49x

    1x

    1x

     import { ChevronLeft, ChevronRight } from 'lucide-react';

    interface PaginationProps {
      page: number;
      totalPages: number;
      onPageChange: (page: number) => void;
      windowSize?: number;
    }

    function Pagination({ page, totalPages, onPageChange, windowSize = 5 }: PaginationProps) {
      if (totalPages <= 1) return null;

      const startPage = Math.max(1, Math.min(page - Math.floor(windowSize / 2), totalPages - windowSize + 1));

      return (
        <div className="flex items-center justify-center gap-2 px-6 py-4 border-t border-border bg-surface-secondary">
          <button
            disabled={page <= 1}
            onClick={() => onPageChange(page - 1)}
            className="p-2 rounded-lg text-text-tertiary hover:text-accent hover:bg-accent-bg disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
          >
            <ChevronLeft className="w-4 h-4" />
          </button>

          {Array.from({ length: Math.min(windowSize, totalPages) }, (_, i) => {
            const p = startPage + i;
            Iif (p > totalPages) return null;
            return (
              <button
                key={`page-${p}`}
                onClick={() => onPageChange(p)}
                className={`min-w-[32px] h-8 px-2 text-[13px] font-medium rounded-lg transition-all ${
                  p === page
                    ? 'bg-accent text-white shadow-sm'
                    : 'text-text-tertiary hover:text-text-primary hover:bg-surface-secondary'
                }`}
              >
                {p}
              </button>
            );
          })}

          <button
            disabled={page >= totalPages}
            onClick={() => onPageChange(page + 1)}
            className="p-2 rounded-lg text-text-tertiary hover:text-accent hover:bg-accent-bg disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
          >
            <ChevronRight className="w-4 h-4" />
          </button>
        </div>
      );
    }

    export { Pagination };
    export type { PaginationProps };