File size: 1,593 Bytes
aeb9637 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
import {
Pagination,
PaginationContent,
PaginationItem,
PaginationLink,
PaginationNext,
PaginationPrevious,
} from "@/components/ui/pagination";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useTranslation } from "@/hooks/useTranslation";
interface LeaderboardPaginationProps {
currentPage: number;
totalPages: number;
onPreviousPage: () => void;
onNextPage: () => void;
}
export const LeaderboardPagination = ({
currentPage,
totalPages,
onPreviousPage,
onNextPage,
}: LeaderboardPaginationProps) => {
const t = useTranslation();
if (totalPages <= 1) return null;
return (
<Pagination>
<PaginationContent>
<PaginationItem>
<PaginationPrevious
onClick={onPreviousPage}
className={currentPage === 1 ? "pointer-events-none opacity-50" : ""}
>
<ChevronLeft className="h-4 w-4" />
<span className="sr-only">{t.leaderboard.previous}</span>
</PaginationPrevious>
</PaginationItem>
<PaginationItem>
<PaginationLink isActive={true}>
{currentPage}
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationNext
onClick={onNextPage}
className={currentPage === totalPages ? "pointer-events-none opacity-50" : ""}
>
<span className="sr-only">{t.leaderboard.next}</span>
<ChevronRight className="h-4 w-4" />
</PaginationNext>
</PaginationItem>
</PaginationContent>
</Pagination>
);
}; |