Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | 103x 103x 128x 128x 128x 128x 128x | import {
ChevronLeft,
ChevronRight,
ChevronsLeft,
ChevronsRight,
} from "lucide-react";
import { Fragment } from "react";
import { Button } from "@/ahuora-design-system/ui/button";
export const PROJECTS_PER_PAGE = 20;
const MAX_VISIBLE_PAGE_NUMBERS = 5;
function getPageNumbers(currentPage: number, pageCount: number) {
if (pageCount <= MAX_VISIBLE_PAGE_NUMBERS) {
return Array.from({ length: pageCount }, (_, index) => index + 1);
}
const middlePageCount = MAX_VISIBLE_PAGE_NUMBERS - 2;
let windowStart = Math.max(2, currentPage - Math.floor(middlePageCount / 2));
let windowEnd = windowStart + middlePageCount - 1;
if (windowEnd >= pageCount) {
windowEnd = pageCount - 1;
windowStart = windowEnd - middlePageCount + 1;
}
return [
1,
...Array.from(
{ length: windowEnd - windowStart + 1 },
(_, index) => windowStart + index,
),
pageCount,
];
}
/** Render project pagination from a server-provided count and page count. */
export function ProjectPagination({
currentPage,
pageCount,
totalProjects,
currentPageSize,
pageSize = PROJECTS_PER_PAGE,
itemLabel = "project",
ariaLabel = "Project pages",
onPageChange,
}: {
currentPage: number;
pageCount: number;
totalProjects: number;
currentPageSize: number;
pageSize?: number;
itemLabel?: string;
ariaLabel?: string;
onPageChange: (page: number) => void;
}) {
Iif (totalProjects <= pageSize) return null;
const pageNumbers = getPageNumbers(currentPage, pageCount);
const firstProjectNumber =
currentPageSize === 0 ? 0 : (currentPage - 1) * pageSize + 1;
const lastProjectNumber =
currentPageSize === 0 ? 0 : firstProjectNumber + currentPageSize - 1;
return (
<nav
aria-label={ariaLabel}
className="flex flex-col gap-3 border-t border-border py-4 sm:flex-row sm:items-center sm:justify-between"
>
<p className="text-sm text-muted-foreground">
Showing {firstProjectNumber}-{lastProjectNumber} of {totalProjects}{" "}
{itemLabel}
{totalProjects === 1 ? "" : "s"}
</p>
<div className="inline-flex flex-wrap items-center gap-1 self-start rounded-md border border-border bg-background p-1 shadow-sm sm:self-auto">
<Button
variant="outline"
size="icon"
onClick={() => onPageChange(1)}
disabled={currentPage === 1}
aria-label="First page"
className="h-7 w-7 border-0 shadow-none"
>
<ChevronsLeft className="icon-small" />
</Button>
<Button
variant="outline"
size="icon"
onClick={() => onPageChange(currentPage - 1)}
disabled={currentPage === 1}
aria-label="Previous page"
className="h-7 w-7 border-0 shadow-none"
>
<ChevronLeft className="icon-small" />
</Button>
{pageNumbers.map((pageNumber, index) => (
<Fragment key={pageNumber}>
{index > 0 && pageNumber - pageNumbers[index - 1] > 1 && (
<span
className="flex h-7 w-6 items-center justify-center text-sm text-muted-foreground"
aria-hidden="true"
>
...
</span>
)}
<Button
variant={pageNumber === currentPage ? "secondary" : "outline"}
size="sm"
onClick={() => onPageChange(pageNumber)}
aria-label={`Page ${pageNumber}`}
aria-current={pageNumber === currentPage ? "page" : undefined}
className="h-7 min-w-7 px-2 shadow-none"
>
{pageNumber}
</Button>
</Fragment>
))}
<Button
variant="outline"
size="icon"
onClick={() => onPageChange(currentPage + 1)}
disabled={currentPage === pageCount}
aria-label="Next page"
className="h-7 w-7 border-0 shadow-none"
>
<ChevronRight className="icon-small" />
</Button>
<Button
variant="outline"
size="icon"
onClick={() => onPageChange(pageCount)}
disabled={currentPage === pageCount}
aria-label="Last page"
className="h-7 w-7 border-0 shadow-none"
>
<ChevronsRight className="icon-small" />
</Button>
</div>
</nav>
);
}
|