90 lines
3.8 KiB
TypeScript
90 lines
3.8 KiB
TypeScript
// * Packages
|
|
import { Link } from "@inertiajs/react";
|
|
// * Components shadcn
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Pagination,
|
|
PaginationContent,
|
|
PaginationItem,
|
|
} from "@/components/ui/pagination";
|
|
// * Other
|
|
import { PaginatorLink } from "@/back/types/global";
|
|
|
|
type PaginationCustomProps = {
|
|
links: Array<PaginatorLink>;
|
|
};
|
|
|
|
export default function PaginationCustom({ links }: PaginationCustomProps) {
|
|
const page =
|
|
Number(new URLSearchParams(window.location.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
|
|
// eslint-disable-next-line react/no-danger
|
|
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;
|
|
}
|