Refactor code structure for improved readability and maintainability
This commit is contained in:
@@ -14,7 +14,7 @@ export default function Pagination({ page, total, limit, onPageChange }: Props)
|
||||
if (totalPages <= 1) return null;
|
||||
|
||||
const from = (page - 1) * limit + 1;
|
||||
const to = Math.min(page * limit, total);
|
||||
const to = Math.min(page * limit, total);
|
||||
|
||||
const pages: (number | '...')[] = [];
|
||||
if (totalPages <= 7) {
|
||||
@@ -28,32 +28,29 @@ export default function Pagination({ page, total, limit, onPageChange }: Props)
|
||||
}
|
||||
|
||||
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">
|
||||
<div className="pagination">
|
||||
<span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>
|
||||
نمایش {formatNumber(from)}–{formatNumber(to)} از {formatNumber(total)} مورد
|
||||
</span>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="page-btns">
|
||||
<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" />
|
||||
<ChevronRightIcon style={{ width: 16, height: 16 }} />
|
||||
</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>
|
||||
<span key={`d-${i}`} style={{ minWidth: 36, height: 36, display: 'grid', placeItems: 'center', fontSize: 13, color: 'var(--text-3)' }}>
|
||||
…
|
||||
</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'
|
||||
}`}
|
||||
className={p === page ? 'on' : ''}
|
||||
>
|
||||
{formatNumber(p as number)}
|
||||
</button>
|
||||
@@ -63,9 +60,8 @@ export default function Pagination({ page, total, limit, onPageChange }: Props)
|
||||
<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" />
|
||||
<ChevronLeftIcon style={{ width: 16, height: 16 }} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user