chore: update Pagination component

This commit is contained in:
ValdiANS
2025-12-06 16:53:20 +07:00
parent 435cc0aedc
commit 7615daa22a
+17 -17
View File
@@ -25,7 +25,7 @@ const PaginationButton = ({
disabled={disabled}
onClick={onClick}
className={cn(
'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg text-sm font-semibold text-base-content/50 aspect-square',
'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
'disabled:text-primary disabled:pointer-events-auto! disabled:cursor-not-allowed! disabled:bg-primary/10 disabled:active:translate-y-0'
)}
>
@@ -52,7 +52,7 @@ const EtcPaginationButton = ({
tabIndex={0}
role='button'
className={cn(
'join-item btn btn-ghost p-2.5 rounded-lg text-sm font-medium text-gray-500 aspect-square'
'join-item btn btn-ghost p-2.5 rounded-lg! text-sm font-medium text-gray-500 aspect-square'
)}
>
...
@@ -61,7 +61,7 @@ const EtcPaginationButton = ({
<div className='dropdown-content'>
<ul
tabIndex={0}
className='menu bg-base-100 rounded-lg z-1 w-fit min-w-max max-h-64 p-1 shadow-sm mb-2 overflow-y-auto flex-nowrap'
className='menu bg-base-100 rounded-lg! z-1 w-fit min-w-max max-h-64 p-1 shadow-sm mb-2 overflow-y-auto flex-nowrap'
>
{pages.map((pageNumber) => (
<li key={pageNumber}>
@@ -80,7 +80,7 @@ const EtcPaginationButton = ({
<button
disabled
className={cn(
'join-item btn btn-ghost p-2.5 rounded-lg text-sm font-medium text-gray-500 aspect-square'
'join-item btn btn-ghost p-2.5 rounded-lg! text-sm font-medium text-gray-500 aspect-square'
)}
>
...
@@ -129,7 +129,7 @@ const Pagination = ({
<select
defaultValue={itemsPerPage}
onChange={rowChangeHandler}
className='select select-xs w-fit text-base-content/50'
className='select select-xs w-fit pl-3 pr-7 text-base-content/50'
>
{rowOptions.map((rowOption, rowOptionIdx) => (
<option
@@ -151,7 +151,7 @@ const Pagination = ({
variant='ghost'
color='none'
className={cn(
'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg text-sm font-semibold text-base-content/50 aspect-square',
'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
'disabled:bg-[initial]! disabled:text-base-content disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
)}
>
@@ -171,7 +171,7 @@ const Pagination = ({
variant='ghost'
color='none'
className={cn(
'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg text-sm font-semibold text-base-content/50 aspect-square',
'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
'disabled:bg-[initial]! disabled:text-base-content disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
)}
>
@@ -191,7 +191,7 @@ const Pagination = ({
disabled={currentPage === totalPages}
onClick={lastPageClickHandler}
className={cn(
'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg text-sm font-semibold text-base-content/50 aspect-square',
'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
'disabled:bg-[initial]! disabled:text-base-content disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
)}
>
@@ -211,7 +211,7 @@ const Pagination = ({
disabled={currentPage === totalPages}
onClick={onNextPage}
className={cn(
'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg text-sm font-semibold text-base-content/50 aspect-square',
'join-item w-10 h-10 grid place-items-center p-2.5 rounded-lg! text-sm font-semibold text-base-content/50 aspect-square',
'disabled:bg-[initial]! disabled:text-base-content disabled:pointer-events-auto! disabled:cursor-not-allowed disabled:active:translate-y-0'
)}
>
@@ -233,16 +233,16 @@ const Pagination = ({
return (
<div className='@container'>
<div className='flex flex-row justify-center items-center'>
<div className='hidden @lg:block'>
<div className='hidden @md:block'>
<DisplayedRowCountSelect />
</div>
<div className='join w-full justify-end @lg:justify-center items-center gap-0.5'>
<div className='hidden @lg:block'>
<div className='join w-full justify-end @md:justify-center items-center gap-0.5'>
<div className='hidden @md:block'>
<GoToFirstPageButton />
</div>
<div className='hidden @lg:block'>
<div className='hidden @md:block'>
<PrevPageButton />
</div>
@@ -390,21 +390,21 @@ const Pagination = ({
</>
)}
<div className='hidden @lg:block'>
<div className='hidden @md:block'>
<NextPageButton />
</div>
<div className='hidden @lg:block'>
<div className='hidden @md:block'>
<GoToLastPageButton />
</div>
</div>
<div className='hidden @lg:block'>
<div className='hidden @md:block'>
<PageInfo />
</div>
</div>
<div className='flex @lg:hidden flex-col justify-center items-end gap-2'>
<div className='flex @md:hidden flex-col justify-center items-end gap-2'>
<div className='flex flex-row items-center gap-0.5'>
<GoToFirstPageButton />
<PrevPageButton />