Improve paging

Author: razzeee

src/components/Pagination.module.scss

@@ -11,6 +11,7 @@
   font-size: 1.2rem;
   align-items: center;
 
+  div,
   a:not(:last-child) {
     &.pageLink {
       border-right: 1px solid var(--border);
@@ -33,7 +34,7 @@
     transition: 0.5s;
     line-height: 42px;
 
-    &:hover {
+    &:hover:not(.ellipsis) {
       cursor: pointer;
       background-color: var(--main-color);
       text-decoration: none;

src/components/Pagination.tsx

@@ -14,31 +14,39 @@ const Pagination: FunctionComponent<Props> = ({ currentPage, pages }) => {
     return <></>
   }
 
+
   return (
     <div className={styles.pagination}>
-      {pages.map((p, index) => {
-        const isActive = p === currentPage
-        const className = isActive ? `${styles.pageActive}` : ''
+      {pages
+        .filter(page => (currentPage - 3 < page && currentPage + 3 > page)
+          || pages[0] === page
+          || pages.length === page)
+        .map((curr, index, array) => {
+          const isActive = curr === currentPage
+          const className = isActive ? `${styles.pageActive}` : ''
 
-        return (
-          <a
-            onClick={() => {
-              router.push({
-                pathname: router.pathname,
-                query: {
-                  ...router.query,
-                  page: p.toString(),
-                },
-              })
-            }}
-            key={`pagination-${index}`}
-            className={`${className} ${styles.pageLink}`}
-          >
-            {p}
-          </a>
-        )
-      })}
-    </div>
+          return (
+            <>
+              {index > 0 && array[index - 1] + 1 !== curr && <div className={`${styles.pageLink} ${styles.ellipsis}`}>...</div>}
+              <a
+                onClick={() => {
+                  router.push({
+                    pathname: router.pathname,
+                    query: {
+                      ...router.query,
+                      page: curr.toString(),
+                    },
+                  })
+                }}
+                key={`pagination-${index}`}
+                className={`${className} ${styles.pageLink}`}
+              >
+                {curr}
+              </a>
+            </>
+          )
+        })}
+    </div >
   )
 }
 export default Pagination