valknar/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: format

Browse Source
This commit is contained in:
Sebastian Krüger
2025-10-10 16:43:21 +02:00
parent f0aabd63b6
commit 75c29e0ba4
551 changed files with 433948 additions and 94145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
Projects/kompose/news/apps/web/src/components/pagination.tsx
View File

@@ -1,113 +1,117 @@
import { Pagination as UIPagination, PaginationContent, Button } from "@repo/ui"
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
import {
Pagination as UIPagination,
PaginationContent,
Button,
} from "@repo/ui";
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
type PaginationProps = {
page: number
totalPages: number
onPageChange: (page: number) => void
hasNextPage: boolean
}
page: number;
totalPages: number;
onPageChange: (page: number) => void;
hasNextPage: boolean;
};
export function Pagination({
page,
totalPages,
onPageChange,
hasNextPage,
page,
totalPages,
onPageChange,
hasNextPage,
}: PaginationProps) {
const totalButtons = 7
const totalButtons = 7;
const renderPageButton = (pageNumber: number) => (
<Button
key={pageNumber}
variant={page === pageNumber ? "default" : "outline"}
size="icon"
onClick={() => onPageChange(pageNumber)}
>
{pageNumber}
</Button>
)
const renderPageButton = (pageNumber: number) => (
<Button
key={pageNumber}
variant={page === pageNumber ? "default" : "outline"}
size="icon"
onClick={() => onPageChange(pageNumber)}
>
{pageNumber}
</Button>
);
const renderEllipsis = (key: string) => (
<Button key={key} variant="outline" size="icon" disabled>
<MoreHorizontal className="h-4 w-4" />
</Button>
)
const renderEllipsis = (key: string) => (
<Button key={key} variant="outline" size="icon" disabled>
<MoreHorizontal className="h-4 w-4" />
</Button>
);
const renderPaginationButtons = () => {
const buttons = []
const renderPaginationButtons = () => {
const buttons = [];
if (totalPages <= totalButtons) {
for (let i = 1; i <= totalPages; i++) {
buttons.push(renderPageButton(i))
}
} else {
buttons.push(renderPageButton(1))
if (totalPages <= totalButtons) {
for (let i = 1; i <= totalPages; i++) {
buttons.push(renderPageButton(i));
}
} else {
buttons.push(renderPageButton(1));
if (page > 3) {
buttons.push(renderEllipsis("start-ellipsis"))
}
if (page > 3) {
buttons.push(renderEllipsis("start-ellipsis"));
}
let start = Math.max(2, page - 1)
let end = Math.min(totalPages - 1, page + 1)
let start = Math.max(2, page - 1);
let end = Math.min(totalPages - 1, page + 1);
if (page <= 3) {
end = Math.min(totalPages - 1, totalButtons - 2)
}
if (page <= 3) {
end = Math.min(totalPages - 1, totalButtons - 2);
}
if (page >= totalPages - 2) {
start = Math.max(2, totalPages - (totalButtons - 2))
}
if (page >= totalPages - 2) {
start = Math.max(2, totalPages - (totalButtons - 2));
}
for (let i = start; i <= end; i++) {
buttons.push(renderPageButton(i))
}
for (let i = start; i <= end; i++) {
buttons.push(renderPageButton(i));
}
if (page < totalPages - 2) {
buttons.push(renderEllipsis("end-ellipsis"))
}
if (page < totalPages - 2) {
buttons.push(renderEllipsis("end-ellipsis"));
}
buttons.push(renderPageButton(totalPages))
}
buttons.push(renderPageButton(totalPages));
}
while (buttons.length < totalButtons) {
buttons.push(
<Button
key={`filler-${buttons.length}`}
variant="outline"
size="icon"
disabled
>
{" "}
</Button>
)
}
while (buttons.length < totalButtons) {
buttons.push(
<Button
key={`filler-${buttons.length}`}
variant="outline"
size="icon"
disabled
>
{" "}
</Button>,
);
}
return buttons
}
return buttons;
};
return (
<UIPagination className="select-none">
<PaginationContent className="flex items-center justify-center space-x-2">
<Button
variant="outline"
size="icon"
onClick={() => onPageChange(Math.max(1, page - 1))}
disabled={page === 1}
>
<ChevronLeft className="h-4 w-4" />
<span className="sr-only">Previous page</span>
</Button>
{renderPaginationButtons()}
<Button
variant="outline"
size="icon"
onClick={() => onPageChange(Math.min(totalPages, page + 1))}
disabled={!hasNextPage}
>
<ChevronRight className="h-4 w-4" />
<span className="sr-only">Next page</span>
</Button>
</PaginationContent>
</UIPagination>
)
return (
<UIPagination className="select-none">
<PaginationContent className="flex items-center justify-center space-x-2">
<Button
variant="outline"
size="icon"
onClick={() => onPageChange(Math.max(1, page - 1))}
disabled={page === 1}
>
<ChevronLeft className="h-4 w-4" />
<span className="sr-only">Previous page</span>
</Button>
{renderPaginationButtons()}
<Button
variant="outline"
size="icon"
onClick={() => onPageChange(Math.min(totalPages, page + 1))}
disabled={!hasNextPage}
>
<ChevronRight className="h-4 w-4" />
<span className="sr-only">Next page</span>
</Button>
</PaginationContent>
</UIPagination>
);
}