@crmy/web 0.5.5 → 0.5.6

package/src/components/crm/PaginationBar.tsx

@@ -1,111 +0,0 @@
-// Copyright 2026 CRMy Contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { cn } from '@/lib/utils';
-
-const PAGE_SIZE_OPTIONS = [25, 50, 100];
-
-function pageNumbers(current: number, total: number): (number | '...')[] {
-  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
-  const pages: (number | '...')[] = [1];
-  if (current > 3) pages.push('...');
-  for (let i = Math.max(2, current - 1); i <= Math.min(total - 1, current + 1); i++) {
-    pages.push(i);
-  }
-  if (current < total - 2) pages.push('...');
-  pages.push(total);
-  return pages;
-}
-
-export interface PaginationBarProps {
-  page: number;
-  pageSize: number;
-  total: number;
-  onPageChange: (page: number) => void;
-  onPageSizeChange?: (size: number) => void;
-  className?: string;
-}
-
-export function PaginationBar({ page, pageSize, total, onPageChange, onPageSizeChange, className }: PaginationBarProps) {
-  if (total <= pageSize) return null;
-
-  const totalPages = Math.ceil(total / pageSize);
-  const start = (page - 1) * pageSize + 1;
-  const end = Math.min(page * pageSize, total);
-  const pages = pageNumbers(page, totalPages);
-
-  return (
-    <div className={cn('flex flex-wrap items-center justify-between gap-3 pt-3 pb-1', className)}>
-      {/* Count */}
-      <span className="text-xs text-muted-foreground whitespace-nowrap">
-        Showing {start}–{end} of {total}
-      </span>
-
-      {/* Page buttons */}
-      <div className="flex items-center gap-0.5">
-        <button
-          onClick={() => onPageChange(page - 1)}
-          disabled={page === 1}
-          className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-          aria-label="Previous page"
-        >
-          <ChevronLeft className="w-4 h-4" />
-        </button>
-
-        {pages.map((p, i) =>
-          p === '...' ? (
-            <span key={`ellipsis-${i}`} className="w-8 text-center text-xs text-muted-foreground select-none">
-              …
-            </span>
-          ) : (
-            <button
-              key={p}
-              onClick={() => onPageChange(p as number)}
-              className={cn(
-                'w-8 h-8 rounded-lg text-xs font-semibold transition-colors',
-                page === p
-                  ? 'bg-primary text-primary-foreground'
-                  : 'text-muted-foreground hover:text-foreground hover:bg-muted',
-              )}
-            >
-              {p}
-            </button>
-          ),
-        )}
-
-        <button
-          onClick={() => onPageChange(page + 1)}
-          disabled={page === totalPages}
-          className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-          aria-label="Next page"
-        >
-          <ChevronRight className="w-4 h-4" />
-        </button>
-      </div>
-
-      {/* Page size */}
-      {onPageSizeChange && (
-        <div className="flex items-center gap-1.5">
-          <span className="text-xs text-muted-foreground">Per page:</span>
-          <div className="flex items-center gap-0.5 bg-muted rounded-lg p-0.5">
-            {PAGE_SIZE_OPTIONS.map(size => (
-              <button
-                key={size}
-                onClick={() => { onPageSizeChange(size); onPageChange(1); }}
-                className={cn(
-                  'px-2 py-1 rounded-md text-xs font-medium transition-colors',
-                  pageSize === size
-                    ? 'bg-card text-foreground shadow-sm'
-                    : 'text-muted-foreground hover:text-foreground',
-                )}
-              >
-                {size}
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}