From a6b99219e1660787f16df23a90e93e9c0e8779fe Mon Sep 17 00:00:00 2001 From: Liam Date: Mon, 14 Oct 2024 10:55:55 +0100 Subject: [PATCH] make the mobile pagination look nicer --- .../src/components/input/pagination.tsx | 49 +++++++++++-------- .../website/src/components/ui/pagination.tsx | 3 +- 2 files changed, 30 insertions(+), 22 deletions(-) diff --git a/projects/website/src/components/input/pagination.tsx b/projects/website/src/components/input/pagination.tsx index 76a74c0..12bbd6a 100644 --- a/projects/website/src/components/input/pagination.tsx +++ b/projects/website/src/components/input/pagination.tsx @@ -10,6 +10,8 @@ import { PaginationNext, PaginationPrevious, } from "../ui/pagination"; +import * as React from "react"; +import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from "@heroicons/react/16/solid"; type PaginationItemWrapperProps = { /** @@ -116,9 +118,11 @@ export default function Pagination({ pageNumbers.push( <> - handleLinkClick(1, e)}> - 1 - + {!mobilePagination && ( + handleLinkClick(1, e)}> + 1 + + )} {startPage > 2 && !mobilePagination && ( @@ -149,6 +153,15 @@ export default function Pagination({ return ( + {/* ">>" before the Previous button in mobile mode */} + {mobilePagination && ( + + handleLinkClick(1, e)}> + + + + )} + {/* Previous button - disabled on the first page */} 2 && ( - <> - {!mobilePagination && ( - - - - )} - - handleLinkClick(totalPages, e)} - > - {totalPages} - - - - )} - {/* Next button - disabled on the last page */} + + {/* ">>" after the Next button in mobile mode */} + {mobilePagination && ( + + handleLinkClick(totalPages, e)} + > + + + + )} ); diff --git a/projects/website/src/components/ui/pagination.tsx b/projects/website/src/components/ui/pagination.tsx index 805edb1..fd6115c 100644 --- a/projects/website/src/components/ui/pagination.tsx +++ b/projects/website/src/components/ui/pagination.tsx @@ -1,4 +1,5 @@ -import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"; +import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/16/solid"; +import { DotsHorizontalIcon } from "@radix-ui/react-icons"; import * as React from "react"; import { cn } from "@/common/utils";