chore: align pagination to bottom (#2239)

rupali-codes · Jan 29, 2024 · eadaa03 · eadaa03 · vercel · Jan 29, 2024
1 parent 229077d
commit eadaa03
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 45 deletions.
diff --git a/components/Pagination/Pagination.tsx b/components/Pagination/Pagination.tsx
@@ -7,13 +7,15 @@ type PaginationProps = {
   totalPages: number[] | null
   currentPage: number
   handlePageChange: (page: number) => void
+  numberOfCards: number
 }
 
 export default function Pagination({
   toporbottom,
   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 && (
-        <div
-          className={clsx(
-            toporbottom == true
-              ? 'w-full z-20 flex lg:w-full items-center justify-center absolute bottom-2 right-0'
-              : 'z-20 flex w-full lg:w-full items-center justify-end absolute top-0 right-0'
+        <div>
+          <div
+          className={(            
+            currentPage == totalPages.length && remainderOfCards <= 3
+              ? 'p-20'
+              : 'w-full z-20 flex lg:w-full items-center justify-center absolute bottom-2 right-0'
           )}
-        >
+          />
           <div
-            className={clsx(
-              'flex items-center',
-              toporbottom == true ? 'px-6 py-1 gap-4' : 'gap-2'
+            className={clsx(            
+              toporbottom == true
+                ? 'w-full z-20 flex lg:w-full items-center justify-center absolute bottom-2 right-0'
+                : 'z-20 flex w-full lg:w-full items-center justify-end absolute top-0 right-0'
             )}
           >
-            <button
-              className={clsx(
-                'flex items-center justify-center text-[#8b5cf6]',
-                isDarkMode ? 'hover:text-white' : 'hover:text-black',
-                'disabled:text-gray-400'
-              )}
-              onClick={() => changePage(currentPage - 1)}
-              disabled={currentPage === 1}
-            >
-              Prev
-            </button>
-            {totalPages &&
-              totalPages.map((page, index) => (
-                <button
-                  key={index}
-                  className={clsx(
-                    'flex items-center justify-center rounded-md hover:bg-[#8b5cf6] hover:text-white px-2',
-                    currentPage === page
-                      ? 'bg-[#8b5cf6] text-white'
-                      : isDarkMode
-                      ? 'text-light'
-                      : 'text-theme-secondary'
-                  )}
-                  onClick={() => changePage(page)}
-                >
-                  {page}
-                </button>
-              ))}
-            <button
+            <div
               className={clsx(
-                'flex items-center justify-center text-[#8b5cf6]',
-                isDarkMode ? 'hover:text-white' : 'hover:text-black',
-                'disabled:text-gray-400'
+                'flex items-center',
+                toporbottom == true ? 'px-6 py-1 gap-4' : 'gap-2'
               )}
-              onClick={() => changePage(currentPage + 1)}
-              disabled={currentPage === totalPages.length}
             >
-              Next
-            </button>
+              <button
+                className={clsx(
+                  'flex items-center justify-center text-[#8b5cf6]',
+                  isDarkMode ? 'hover:text-white' : 'hover:text-black',
+                  'disabled:text-gray-400'
+                )}
+                onClick={() => changePage(currentPage - 1)}
+                disabled={currentPage === 1}
+              >
+                Prev
+              </button>
+              {totalPages &&
+                totalPages.map((page, index) => (
+                  <button
+                    key={index}
+                    className={clsx(
+                      'flex items-center justify-center rounded-md hover:bg-[#8b5cf6] hover:text-white px-2',
+                      currentPage === page
+                        ? 'bg-[#8b5cf6] text-white'
+                        : isDarkMode
+                        ? 'text-light'
+                        : 'text-theme-secondary'
+                    )}
+                    onClick={() => changePage(page)}
+                  >
+                    {page}
+                  </button>
+                ))}
+              <button
+                className={clsx(
+                  'flex items-center justify-center text-[#8b5cf6]',
+                  isDarkMode ? 'hover:text-white' : 'hover:text-black',
+                  'disabled:text-gray-400'
+                )}
+                onClick={() => changePage(currentPage + 1)}
+                disabled={currentPage === totalPages.length}
+              >
+                Next
+              </button>
+            </div>
           </div>
         </div>
       )}

diff --git a/pages/[category]/[...subcategory].tsx b/pages/[category]/[...subcategory].tsx
@@ -22,6 +22,7 @@ const SubCategory: NextPage<PageProps> = ({ 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,13 +108,15 @@ const SubCategory: NextPage<PageProps> = ({ subcategory }) => {
           totalPages={totalPages}
           currentPage={currentPage}
           handlePageChange={handlePageChange}
+          numberOfCards={numberOfCards}
         />
         <div className=" min-w-full h-10 py-5" />
         <Pagination
           toporbottom={!toporbottom}
           totalPages={totalPages}
           currentPage={currentPage}
           handlePageChange={handlePageChange}
+          numberOfCards={numberOfCards}
         />
       </div>
     </>