🐛 Fix pagination

craigary · Sep 6, 2021 · 65bc421 · 65bc421
1 parent 204e93c
commit 65bc421
Showing 1 changed file with 16 additions and 14 deletions.
diff --git a/components/Pagination.js b/components/Pagination.js
@@ -5,8 +5,12 @@ import { useLocale } from '@/lib/locale'
 const Pagination = ({ page, showNext }) => {
   const locale = useLocale()
   const currentPage = +page
+  let additionalClassName = 'justify-between'
+  if (currentPage === 1 && showNext) additionalClassName = 'justify-end'
+  if (currentPage !== 1 && !showNext) additionalClassName = 'justify-start'
   return (
-    <div className="flex justify-between font-medium text-black dark:text-gray-100">
+    <div className={`flex font-medium text-black dark:text-gray-100 ${additionalClassName}`}>
+      {currentPage !== 1 && (
       <Link
         href={
           currentPage - 1 === 1
@@ -17,24 +21,22 @@ const Pagination = ({ page, showNext }) => {
         <a>
           <button
             rel="prev"
-            className={`${
-              currentPage === 1 ? 'invisible' : 'block'
-            } cursor-pointer`}
+            className="block cursor-pointer"
           >
             ← {locale.PAGINATION.PREV}
           </button>
         </a>
       </Link>
-      <Link href={`/page/${currentPage + 1}`}>
-        <a>
-          <button
-            rel="next"
-            className={`${+showNext ? 'block' : 'invisible'} cursor-pointer`}
-          >
-            {locale.PAGINATION.NEXT} →
-          </button>
-        </a>
-      </Link>
+      )}
+      {showNext && (
+        <Link href={`/page/${currentPage + 1}`}>
+          <a>
+            <button rel="next" className="block cursor-pointer">
+              {locale.PAGINATION.NEXT} →
+            </button>
+          </a>
+        </Link>
+      )}
     </div>
   )
 }