# All files / src/components/ui pagination-controls.tsx

0% Statements 0/12
0% Branches 0/8
0% Functions 0/3
0% Lines 0/11

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
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81

     'use client';

    import React from 'react';
    import { ChevronLeft, ChevronRight } from 'lucide-react';
    import { useTranslation } from 'react-i18next';
    import { Button } from '@/components/ui/button';
    import { cn } from '@/lib/utils';

    interface PaginationControlsProps {
      page: number;
      onPageChange: (page: number) => void;
      hasNextPage: boolean;
      isLoading?: boolean;
      pageSize?: number;
      label?: string;
      className?: string;
    }

    export function PaginationControls({
      page,
      onPageChange,
      hasNextPage,
      isLoading = false,
      pageSize,
      label,
      className}: PaginationControlsProps) {
      const { t } = useTranslation(['user', 'translation']);
      const canGoBack = page > 1;

      return (
        <div
          className={cn(
            'mt-6 flex flex-col gap-3 border-t border-slate-800/60 pt-4 sm:flex-row sm:items-center sm:justify-between',
            className
          )}
        >
          <div>
            {label && (
              <p className="text-xs uppercase tracking-wide text-slate-500">
                {label}
              </p>
            )}
            <p className="text-sm text-slate-400">
              {pageSize
                ? t('user.pagination.showing', {
                    page,
                    count: pageSize})
                : t('user.pagination.current', { page })}
            </p>
          </div>
          <div className="flex items-center gap-3">
            <Button
              variant="ghost"
              size="sm"
              className="rounded-full border border-slate-600/50 bg-slate-800/60 text-slate-200 hover:bg-slate-700/80 hover:text-white disabled:opacity-40 disabled:cursor-not-allowed"
              disabled={!canGoBack || isLoading}
              onClick={() => onPageChange(Math.max(1, page - 1))}
            >
              <ChevronLeft className="mr-2 h-4 w-4" />
              {t('user.pagination.previous')}
            </Button>
            <span className="px-3 py-1.5 rounded-full bg-slate-700/50 text-sm font-semibold text-white border border-slate-600/30">
              {t('user.pagination.pageLabel', { page })}
            </span>
            <Button
              variant="ghost"
              size="sm"
              className="rounded-full border border-slate-600/50 bg-slate-800/60 text-slate-200 hover:bg-slate-700/80 hover:text-white disabled:opacity-40 disabled:cursor-not-allowed"
              disabled={!hasNextPage || isLoading}
              onClick={() => onPageChange(page + 1)}
            >
              {t('user.pagination.next')}
              <ChevronRight className="ml-2 h-4 w-4" />
            </Button>
          </div>
        </div>
      );
    }

    export default PaginationControls;