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}
/>
>