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 <button
onClick={onClick} onClick={onClick}
disabled={disabled || loading} disabled={disabled || loading}
className={`px-3 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${ className={`px-2 py-1 text-xs font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${
isActive isActive
? 'bg-green-500/20 text-green-600 dark:text-green-400 border border-green-500/30 dark:border-green-500/20' ? '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' : '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); const to = Math.min(currentPage * limit, total);
return ( 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"> <div className="flex items-center justify-between gap-4">
{/* Per Page Selector */} {/* Per Page Selector */}
@@ -96,40 +96,46 @@ const Pagination = ({
</> </>
) : ( ) : (
<> <>
<Button {totalPages > 1 && (
variant="ghost" <Button
size="sm" variant="ghost"
onClick={() => onPageChange(currentPage - 1)} size="sm"
disabled={currentPage === 1} onClick={() => onPageChange(currentPage - 1)}
> disabled={currentPage === 1}
Précédent >
</Button> Précédent
</Button>
)}
<div className="hidden sm:flex items-center gap-1"> {totalPages > 1 && (
{getPageNumbers().map((page, index) => ( <div className="hidden sm:flex items-center gap-1">
<React.Fragment key={index}> {getPageNumbers().map((page, index) => (
{page === '...' ? ( <React.Fragment key={index}>
<span className="px-2 text-xs text-neutral-400 dark:text-neutral-500">…</span> {page === '...' ? (
) : ( <span className="px-2 text-xs text-neutral-400 dark:text-neutral-500">…</span>
<PaginationButton ) : (
onClick={() => onPageChange(page)} <PaginationButton
isActive={currentPage === page} onClick={() => onPageChange(page)}
> isActive={currentPage === page}
{page} >
</PaginationButton> {page}
)} </PaginationButton>
</React.Fragment> )}
))} </React.Fragment>
</div> ))}
</div>
)}
<Button {totalPages > 1 && (
variant="ghost" <Button
size="sm" variant="ghost"
onClick={() => onPageChange(currentPage + 1)} size="sm"
disabled={currentPage === totalPages} onClick={() => onPageChange(currentPage + 1)}
> disabled={currentPage === totalPages}
Suivant >
</Button> Suivant
</Button>
)}
</> </>
)} )}
</div> </div>