selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-22 05:09:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve list view

Browse Source
This commit is contained in:
Sara
2023-12-06 17:12:10 +01:00
parent 6fe61cd5e3
commit 5ef7dc0a76
4 changed files with 180 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
www/app/[domain]/browse/pagination.tsx
View File

@@ -1,3 +1,6 @@
import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
type PaginationProps = {
page: number;
setPage: (page: number) => void;
@@ -40,13 +43,13 @@ export default function Pagination(props: PaginationProps) {
return (
<div className="flex justify-center space-x-4 my-4">
<button
className={`w-10 h-10 rounded-full p-2 border border-gray-300 disabled:bg-white ${
className={`w-10 h-10 rounded-full p-2 ${
canGoPrevious ? "text-gray-500" : "text-gray-300"
}`}
onClick={() => handlePageChange(page - 1)}
disabled={!canGoPrevious}
>
<i className="fa fa-chevron-left">&lt;</i>
<FontAwesomeIcon icon={faArrowLeft} className="h-5 w-auto" />
</button>
{pageNumbers.map((pageNumber) => (
@@ -62,13 +65,13 @@ export default function Pagination(props: PaginationProps) {
))}
<button
className={`w-10 h-10 rounded-full p-2 border border-gray-300 disabled:bg-white ${
className={`w-10 h-10 rounded-full p-2 ${
canGoNext ? "text-gray-500" : "text-gray-300"
}`}
onClick={() => handlePageChange(page + 1)}
disabled={!canGoNext}
>
<i className="fa fa-chevron-right">&gt;</i>
<FontAwesomeIcon icon={faArrowRight} className="h-5 w-auto" />
</button>
</div>
);