hamed
942634c98e
- Refactored PaymentsPage, RatingsPage, RepresentationDetailPage, RepresentationsPage, SecretariesPage, SettlementsPage, SmsPage, UserDetailPage, and UsersPage to use consistent class names for styling. - Updated button styles to use new utility classes for primary, secondary, and danger buttons. - Enhanced dark mode support across various components by adjusting text and background colors. - Introduced new utility classes for form inputs, labels, and info rows to standardize styling. - Implemented Zustand for persistent UI state management, including dark mode toggle functionality. - Updated CSS to include new styles for skeleton loading and animations. - Added optional dependencies for improved compatibility with different platforms.
74 lines
2.7 KiB
TypeScript
74 lines
2.7 KiB
TypeScript
import React from 'react';
|
||
import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
|
||
import { formatNumber } from '../../lib/utils';
|
||
|
||
interface Props {
|
||
page: number;
|
||
total: number;
|
||
limit: number;
|
||
onPageChange: (page: number) => void;
|
||
}
|
||
|
||
export default function Pagination({ page, total, limit, onPageChange }: Props) {
|
||
const totalPages = Math.ceil(total / limit);
|
||
if (totalPages <= 1) return null;
|
||
|
||
const from = (page - 1) * limit + 1;
|
||
const to = Math.min(page * limit, total);
|
||
|
||
const pages: (number | '...')[] = [];
|
||
if (totalPages <= 7) {
|
||
for (let i = 1; i <= totalPages; i++) pages.push(i);
|
||
} else {
|
||
pages.push(1);
|
||
if (page > 3) pages.push('...');
|
||
for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) pages.push(i);
|
||
if (page < totalPages - 2) pages.push('...');
|
||
pages.push(totalPages);
|
||
}
|
||
|
||
return (
|
||
<div className="flex items-center justify-between mt-5 pt-4 border-t border-slate-100 dark:border-gray-700/40 text-sm flex-wrap gap-3">
|
||
<span className="text-slate-500 dark:text-slate-400 text-xs">
|
||
نمایش {formatNumber(from)}–{formatNumber(to)} از {formatNumber(total)} مورد
|
||
</span>
|
||
|
||
<div className="flex items-center gap-1">
|
||
<button
|
||
onClick={() => onPageChange(page - 1)}
|
||
disabled={page === 1}
|
||
className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-500 dark:text-slate-400 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
<ChevronRightIcon className="w-4 h-4" />
|
||
</button>
|
||
|
||
{pages.map((p, i) =>
|
||
p === '...' ? (
|
||
<span key={`dots-${i}`} className="w-8 text-center text-slate-400 dark:text-slate-500 text-xs">…</span>
|
||
) : (
|
||
<button
|
||
key={p}
|
||
onClick={() => onPageChange(p as number)}
|
||
className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
|
||
p === page
|
||
? 'bg-primary-600 text-white shadow-sm shadow-primary-500/30'
|
||
: 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-700'
|
||
}`}
|
||
>
|
||
{formatNumber(p as number)}
|
||
</button>
|
||
)
|
||
)}
|
||
|
||
<button
|
||
onClick={() => onPageChange(page + 1)}
|
||
disabled={page === totalPages}
|
||
className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-500 dark:text-slate-400 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
<ChevronLeftIcon className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|