Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(pagination): remove floating style from pagination component

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-05-24 21:28:03 +03:30
parent 215425dede
commit 854f439bf9
1 changed files with 34 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Pagination.tsx
View File

@@ -63,8 +63,8 @@ export const Pagination: React.FC<PaginationProps> = ({
}, [currentPage, totalPages]); }, [currentPage, totalPages]);
return ( return (
<div className="sticky bottom-0 left-0 right-0 z-10 mt-auto -mx-4 border-t border-slate-200/80 bg-white/90 px-4 py-4 backdrop-blur-xl dark:border-slate-800/80 dark:bg-slate-950/90 sm:mx-0 sm:rounded-3xl sm:border sm:px-5"> <div className="sticky bottom-0 left-0 right-0 z-10 mt-auto -mx-4 border-t border-slate-200/80 bg-white/95 px-4 py-3 shadow-[0_-10px_30px_rgba(15,23,42,0.06)] backdrop-blur-xl dark:border-slate-800/80 dark:bg-slate-950/95 dark:shadow-[0_-10px_30px_rgba(0,0,0,0.24)] md:-mx-6 md:px-6">
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between"> <div className="mx-auto flex w-full max-w-7xl gap-3 flex-row items-center justify-between">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between lg:justify-start"> <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between lg:justify-start">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Select <Select
@@ -78,9 +78,9 @@ export const Pagination: React.FC<PaginationProps> = ({
label: String(toPersianNum(option)), label: String(toPersianNum(option)),
}))} }))}
className="w-24 shrink-0" className="w-24 shrink-0"
buttonClassName="h-10 rounded-2xl border-slate-200 bg-slate-50 font-medium text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200" buttonClassName="h-9 rounded-lg border-slate-200 bg-slate-50 font-medium text-slate-700 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200"
/> />
<span className="inline-flex h-10 items-center rounded-2xl border border-slate-200 bg-slate-50 px-4 text-sm font-medium text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 sm:hidden"> <span className="inline-flex h-9 items-center rounded-lg border border-slate-200 bg-slate-50 px-3 text-sm font-medium text-slate-600 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 sm:hidden">
{toPersianNum(currentPage)} / {toPersianNum(totalPages)} {toPersianNum(currentPage)} / {toPersianNum(totalPages)}
</span> </span>
</div> </div>
@@ -98,7 +98,7 @@ export const Pagination: React.FC<PaginationProps> = ({
type="button" type="button"
onClick={() => onPageChange(pageItem)} onClick={() => onPageChange(pageItem)}
className={cn( className={cn(
'inline-flex h-10 min-w-10 items-center justify-center rounded-2xl border px-3 text-sm font-semibold transition-colors', 'inline-flex h-9 min-w-9 items-center justify-center rounded-lg border px-3 text-sm font-semibold transition-colors',
pageItem === currentPage pageItem === currentPage
? 'border-sky-500 bg-sky-500 text-white shadow-sm' ? 'border-sky-500 bg-sky-500 text-white shadow-sm'
: 'border-slate-200 bg-slate-50 text-slate-600 hover:border-slate-300 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800', : 'border-slate-200 bg-slate-50 text-slate-600 hover:border-slate-300 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800',
@@ -109,7 +109,7 @@ export const Pagination: React.FC<PaginationProps> = ({
) : ( ) : (
<span <span
key={`${pageItem}-${index}`} key={`${pageItem}-${index}`}
className="inline-flex h-10 min-w-10 items-center justify-center rounded-2xl text-slate-400 dark:text-slate-500" className="inline-flex h-9 min-w-9 items-center justify-center rounded-lg text-slate-400 dark:text-slate-500"
> >
<MoreHorizontal className="h-4 w-4" /> <MoreHorizontal className="h-4 w-4" />
</span> </span>
@@ -123,7 +123,7 @@ export const Pagination: React.FC<PaginationProps> = ({
size="sm" size="sm"
onClick={() => onPageChange(currentPage - 1)} onClick={() => onPageChange(currentPage - 1)}
disabled={currentPage === 1} disabled={currentPage === 1}
className="h-10 rounded-2xl border-slate-200 bg-slate-50 px-4 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800" className="h-9 rounded-lg border-slate-200 bg-slate-50 px-3 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
> >
<ChevronLeft className="h-4 w-4 rtl:rotate-180" /> <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
{t.pagination?.previous || 'Previous'} {t.pagination?.previous || 'Previous'}
@@ -138,7 +138,7 @@ export const Pagination: React.FC<PaginationProps> = ({
size="sm" size="sm"
onClick={() => onPageChange(currentPage + 1)} onClick={() => onPageChange(currentPage + 1)}
disabled={currentPage >= totalPages} disabled={currentPage >= totalPages}
className="h-10 rounded-2xl border-slate-200 bg-slate-50 px-4 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800" className="h-9 rounded-lg border-slate-200 bg-slate-50 px-3 text-slate-700 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
> >
{t.pagination?.next || 'Next'} {t.pagination?.next || 'Next'}
<ChevronRight className="h-4 w-4 rtl:rotate-180" /> <ChevronRight className="h-4 w-4 rtl:rotate-180" />