zen/core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

style(ui): reduce pagination size and hide nav buttons on single page

Browse Source
This commit is contained in:
Hyko
2026-04-19 17:10:55 -04:00
parent a6a681e358
commit e881f04ca2
1 changed files with 42 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/Pagination.js
+42 -36
View File
@@ -39,9 +39,9 @@ const Pagination = ({
<button
onClick={onClick}
disabled={disabled || loading}
className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
isActive
? 'bg-green-500/20 text-green-600 dark:text-green-400 border border-green-500/30 dark:border-green-500/20'
className={`px-2 py-1 text-xs font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
isActive
? 'bg-green-500/20 text-green-600 dark:text-green-400 border border-green-500/30 dark:border-green-500/20'
: 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-700/30 hover:text-neutral-900 dark:hover:text-white'
}`}
>
@@ -55,7 +55,7 @@ const Pagination = ({
const to = Math.min(currentPage * limit, total);
return (
<div className={`px-6 py-3 border-t border-neutral-200 dark:border-neutral-700/30 ${className}`} {...props}>
<div className={`px-4 py-2 border-t border-neutral-200 dark:border-neutral-700/30 ${className}`} {...props}>
<div className="flex items-center justify-between gap-4">
{/* Per Page Selector */}
@@ -96,40 +96,46 @@ const Pagination = ({
</>
) : (
<>
<Button
variant="ghost"
size="sm"
onClick={() => onPageChange(currentPage - 1)}
disabled={currentPage === 1}
>
Précédent
</Button>
{totalPages > 1 && (
<Button
variant="ghost"
size="sm"
onClick={() => onPageChange(currentPage - 1)}
disabled={currentPage === 1}
>
Précédent
</Button>
)}
<div className="hidden sm:flex items-center gap-1">
{getPageNumbers().map((page, index) => (
<React.Fragment key={index}>
{page === '...' ? (
<span className="px-2 text-xs text-neutral-400 dark:text-neutral-500">…</span>
) : (
<PaginationButton
onClick={() => onPageChange(page)}
isActive={currentPage === page}
>
{page}
</PaginationButton>
)}
</React.Fragment>
))}
</div>
{totalPages > 1 && (
<div className="hidden sm:flex items-center gap-1">
{getPageNumbers().map((page, index) => (
<React.Fragment key={index}>
{page === '...' ? (
<span className="px-2 text-xs text-neutral-400 dark:text-neutral-500">…</span>
) : (
<PaginationButton
onClick={() => onPageChange(page)}
isActive={currentPage === page}
>
{page}
</PaginationButton>
)}
</React.Fragment>
))}
</div>
)}
<Button
variant="ghost"
size="sm"
onClick={() => onPageChange(currentPage + 1)}
disabled={currentPage === totalPages}
>
Suivant
</Button>
{totalPages > 1 && (
<Button
variant="ghost"
size="sm"
onClick={() => onPageChange(currentPage + 1)}
disabled={currentPage === totalPages}
>
Suivant
</Button>
)}
</>
)}
</div>