61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
import Button from "@/components/Low/Button";
|
|
import {useMemo, useState} from "react";
|
|
import {BiChevronLeft} from "react-icons/bi";
|
|
import {BsChevronDoubleLeft, BsChevronDoubleRight, BsChevronLeft, BsChevronRight} from "react-icons/bs";
|
|
|
|
export default function usePagination<T>(list: T[], size = 25) {
|
|
const [page, setPage] = useState(0);
|
|
|
|
const items = useMemo(() => list.slice(page * size, (page + 1) * size), [page, size, list]);
|
|
|
|
const render = () => (
|
|
<div className="w-full flex gap-2 justify-between items-center">
|
|
<div className="flex items-center gap-4 w-fit">
|
|
<Button className="w-[200px] h-fit" disabled={page === 0} onClick={() => setPage((prev) => prev - 1)}>
|
|
Previous Page
|
|
</Button>
|
|
</div>
|
|
<div className="flex items-center gap-4 w-fit">
|
|
<span className="opacity-80">
|
|
{page * size + 1} - {(page + 1) * size > list.length ? list.length : (page + 1) * size} / {list.length}
|
|
</span>
|
|
<Button className="w-[200px]" disabled={(page + 1) * size >= list.length} onClick={() => setPage((prev) => prev + 1)}>
|
|
Next Page
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const renderMinimal = () => (
|
|
<div className="flex gap-4 items-center">
|
|
<div className="flex gap-2 items-center">
|
|
<button disabled={page === 0} onClick={() => setPage(0)} className="disabled:opacity-60 disabled:cursor-not-allowed">
|
|
<BsChevronDoubleLeft />
|
|
</button>
|
|
<button disabled={page === 0} onClick={() => setPage((prev) => prev - 1)} className="disabled:opacity-60 disabled:cursor-not-allowed">
|
|
<BsChevronLeft />
|
|
</button>
|
|
</div>
|
|
<span className="opacity-80 w-32 text-center">
|
|
{page * size + 1} - {(page + 1) * size > list.length ? list.length : (page + 1) * size} / {list.length}
|
|
</span>
|
|
<div className="flex gap-2 items-center">
|
|
<button
|
|
disabled={(page + 1) * size >= list.length}
|
|
onClick={() => setPage((prev) => prev + 1)}
|
|
className="disabled:opacity-60 disabled:cursor-not-allowed">
|
|
<BsChevronRight />
|
|
</button>
|
|
<button
|
|
disabled={(page + 1) * size >= list.length}
|
|
onClick={() => setPage(Math.floor(list.length / size))}
|
|
className="disabled:opacity-60 disabled:cursor-not-allowed">
|
|
<BsChevronDoubleRight />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return {page, items, setPage, render, renderMinimal};
|
|
}
|