devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created a new system for the Groups that will persist after having entities

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-09-25 16:18:43 +01:00
parent 8c392f8b49
commit dd94228672
18 changed files with 823 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/hooks/usePagination.tsx
View File

@@ -1,5 +1,7 @@
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);
@@ -24,5 +26,35 @@ export default function usePagination<T>(list: T[], size = 25) {
</div>
);
return {page, items, setPage, render};
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};
}