diff --git a/components/Pagination/Pagination.tsx b/components/Pagination/Pagination.tsx index 0fb32cb62..6861101a7 100644 --- a/components/Pagination/Pagination.tsx +++ b/components/Pagination/Pagination.tsx @@ -7,6 +7,7 @@ type PaginationProps = { totalPages: number[] | null currentPage: number handlePageChange: (page: number) => void + numberOfCards: number } export default function Pagination({ @@ -14,6 +15,7 @@ export default function Pagination({ totalPages, currentPage, handlePageChange, + numberOfCards, }: PaginationProps) { const { resolvedTheme } = useTheme() const isDarkMode = resolvedTheme === 'dark' @@ -29,61 +31,72 @@ export default function Pagination({ scrollToTop() }, [currentPage]) + const remainderOfCards = numberOfCards % 9 + return ( <> {totalPages && totalPages.length > 1 && ( -
+
+ />
- - {totalPages && - totalPages.map((page, index) => ( - - ))} - + + {totalPages && + totalPages.map((page, index) => ( + + ))} + +
)} diff --git a/pages/[category]/[...subcategory].tsx b/pages/[category]/[...subcategory].tsx index 23be5529e..f94f58762 100644 --- a/pages/[category]/[...subcategory].tsx +++ b/pages/[category]/[...subcategory].tsx @@ -22,6 +22,7 @@ const SubCategory: NextPage = ({ subcategory }) => { const title = `LinksHub - ${ pageCategory[0].toUpperCase() + pageCategory.slice(1) }` + const numberOfCards = filterDB[0].length const { totalPages, currentPage, startIndex, endIndex, handlePageChange } = usePagination(filterDB.length ? filterDB[0].length : 0) let content: JSX.Element[] | JSX.Element @@ -107,6 +108,7 @@ const SubCategory: NextPage = ({ subcategory }) => { totalPages={totalPages} currentPage={currentPage} handlePageChange={handlePageChange} + numberOfCards={numberOfCards} />
= ({ subcategory }) => { totalPages={totalPages} currentPage={currentPage} handlePageChange={handlePageChange} + numberOfCards={numberOfCards} />