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

68
src/components/Pagination.tsx
View File

@@ -4,33 +4,33 @@ import { useTranslation } from '../hooks/useTranslation';
import { cn } from '../lib/utils';
import { Select } from './ui/Select';
import { Button } from './ui/button';
interface PaginationProps {
currentPage: number;
totalCount: number;
limit: number;
onPageChange: (page: number) => void;
onLimitChange: (limit: number) => void;
pageSizeOptions?: number[];
}
interface PaginationProps {
currentPage: number;
totalCount: number;
limit: number;
onPageChange: (page: number) => void;
onLimitChange: (limit: number) => void;
pageSizeOptions?: number[];
}
export const Pagination: React.FC<PaginationProps> = ({
currentPage,
totalCount,
limit,
onPageChange,
onLimitChange,
pageSizeOptions = [10, 20, 50],
}) => {
const { t, lang } = useTranslation();
const isFa = lang === 'fa';
const toPersianNum = (num: string | number | undefined | null) => {
if (num === null || num === undefined) return num;
if (!isFa) return num;
return num.toString().replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d as any]);
};
currentPage,
totalCount,
limit,
onPageChange,
onLimitChange,
pageSizeOptions = [10, 20, 50],
}) => {
const { t, lang } = useTranslation();
const isFa = lang === 'fa';
const toPersianNum = (num: string | number | undefined | null) => {
if (num === null || num === undefined) return num;
if (!isFa) return num;
return num.toString().replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d as any]);
};
const totalPages = Math.ceil(totalCount / limit) || 1;
if (totalCount === 0) return null;
@@ -63,8 +63,8 @@ export const Pagination: React.FC<PaginationProps> = ({
}, [currentPage, totalPages]);
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="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
<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="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 items-center gap-3">
<Select
@@ -78,9 +78,9 @@ export const Pagination: React.FC<PaginationProps> = ({
label: String(toPersianNum(option)),
}))}
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)}
</span>
</div>
@@ -98,7 +98,7 @@ export const Pagination: React.FC<PaginationProps> = ({
type="button"
onClick={() => onPageChange(pageItem)}
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
? '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',
@@ -109,7 +109,7 @@ export const Pagination: React.FC<PaginationProps> = ({
) : (
<span
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" />
</span>
@@ -123,7 +123,7 @@ export const Pagination: React.FC<PaginationProps> = ({
size="sm"
onClick={() => onPageChange(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" />
{t.pagination?.previous || 'Previous'}
@@ -138,7 +138,7 @@ export const Pagination: React.FC<PaginationProps> = ({
size="sm"
onClick={() => onPageChange(currentPage + 1)}
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'}
<ChevronRight className="h-4 w-4 rtl:rotate-180" />