81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import { Link } from "@inertiajs/react";
|
|
|
|
import type { PaginatorLink } from "@/back/types/global";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Pagination,
|
|
PaginationContent,
|
|
PaginationItem,
|
|
} from "@/components/ui/pagination";
|
|
|
|
interface PaginationCustomProps {
|
|
links: PaginatorLink[];
|
|
}
|
|
|
|
export default function PaginationCustom({ links }: PaginationCustomProps) {
|
|
const page =
|
|
Number(
|
|
new URLSearchParams(new URL(window.location.href).search).get("page"),
|
|
) || 1;
|
|
const lastPage = links.length - 1;
|
|
|
|
if (links.length > 3) {
|
|
return (
|
|
<Pagination className="flex justify-center w-fit m-0">
|
|
<PaginationContent className="flex space-x-2">
|
|
{links.map((link, index) => {
|
|
if (
|
|
index === 0 ||
|
|
index === lastPage ||
|
|
index === page ||
|
|
index === page - 1 ||
|
|
index === page + 1 ||
|
|
index === 1 ||
|
|
index === lastPage - 1
|
|
) {
|
|
const condition =
|
|
(index === 0 && page === 1) ||
|
|
(index === lastPage && page === lastPage - 1) ||
|
|
index === page;
|
|
return (
|
|
<PaginationItem key={link.label}>
|
|
<Button
|
|
variant={condition ? "secondary" : "default"}
|
|
asChild={!condition}
|
|
size={
|
|
index !== 0 && index !== lastPage ? "icon" : "default"
|
|
}
|
|
disabled={condition}
|
|
>
|
|
{!condition ? (
|
|
<Link
|
|
href={link.url ?? ""}
|
|
dangerouslySetInnerHTML={{
|
|
__html: link.label,
|
|
}}
|
|
/>
|
|
) : (
|
|
<span
|
|
dangerouslySetInnerHTML={{
|
|
__html: link.label,
|
|
}}
|
|
/>
|
|
)}
|
|
</Button>
|
|
</PaginationItem>
|
|
);
|
|
}
|
|
if (
|
|
(index === 2 && page > 3) ||
|
|
(index === lastPage - 2 && page < lastPage - 2)
|
|
) {
|
|
return <PaginationItem key={link.label}>...</PaginationItem>;
|
|
}
|
|
return null;
|
|
})}
|
|
</PaginationContent>
|
|
</Pagination>
|
|
);
|
|
}
|
|
return null;
|
|
}
|