Mejorado paginate visualmente, es mas bonito y espaciado

Me copie levemente de lastfm

src/components/Paginate.jsx

@@ -27,6 +27,8 @@ export const Paginate = (props) => {
     const pageNeighbours = typeof props.pageNeighbours === 'number' ? Math.max(0, Math.min(props.pageNeighbours, 2)) : 0;
     const totalPages = Math.ceil(totalRecords / pageLimit);
     const [currentPage, setCurrentPage] = useState(typeof props.currentPage === 'number' ? props.currentPage : 1);
+    let hasLeft = false;
+    let hasRight = false;
 
     const gotoPage = (page) => {
         const currentPage = Math.max(0, Math.min(page, totalPages));
@@ -88,14 +90,18 @@ export const Paginate = (props) => {
             // handle: (1) < {5 6} [7] {8 9} (10)
             if (hasLeftSpill && !hasRightSpill) {
                 const extraPages = range(startPage - spillOffset, startPage - 1);
-                pages = [LEFT_PAGE, 1, SPACE_A, ...extraPages, ...pages];
+                hasLeft = true;
+                pages = [1, SPACE_A, ...extraPages, ...pages];
                 // handle: (1) {2 3} [4] {5 6} > (10)
             } else if (!hasLeftSpill && hasRightSpill) {
                 const extraPages = range(endPage + 1, endPage + spillOffset);
-                pages = [1, ...pages, ...extraPages, SPACE_B, totalPages, RIGHT_PAGE];
+                hasRight = true;
+                pages = [1, ...pages, ...extraPages, SPACE_B, totalPages];
                 // handle: (1) < {4 5} [6] {7 8} > (10)
             } else if (hasLeftSpill && hasRightSpill) {
-                pages = [LEFT_PAGE, 1, SPACE_A, ...pages, SPACE_B, totalPages, RIGHT_PAGE];
+                hasLeft = true;
+                hasRight = true;
+                pages = [1, SPACE_A, ...pages, SPACE_B, totalPages];
             }
 
             return pages;
@@ -110,24 +116,9 @@ export const Paginate = (props) => {
 
     const pages = fetchPageNumbers();
     const blocks = pages.map((page, index) => {
-        if (page === LEFT_PAGE) return (
-            <li key={page} className="page-item">
-                <a className="page-link" href={makePageLink(currentPage - 1)} onClick={handleMoveLeft}>
-                    <span>Anterior</span>
-                </a>
-            </li>
-        );
-        if (page === RIGHT_PAGE) return (
-            <li key={page} className="page-item">
-                <a className="page-link" href={makePageLink(currentPage + 1)} onClick={handleMoveRight}>
-                    <span>Siguiente</span>
-                </a>
-            </li>
-        );
         if (page === SPACE_A || page === SPACE_B) return (
             <span key={page} className='spacing'>…</span>
         );
-
         return (
             <li key={page} className='page-item '>
                 <a className={`page-link ${currentPage === page ? 'active' : ''}`} href={makePageLink(page)} onClick={handleClick(page)}>{page}</a>
@@ -138,8 +129,28 @@ export const Paginate = (props) => {
     return (
         <Fragment>
             <ul className="pagination">
+                { hasLeft ?
+                    <li key='left' className="page-item left">
+                        <a className="page-link" href={makePageLink(currentPage - 1)} onClick={handleMoveLeft}>
+                            <span>Anterior</span>
+                        </a>
+                    </li>
+                    :
+                    <li key='left' className="page-item left"/>
+                }
+                <ul key='center' className='page-center'>
                     {blocks}
                 </ul>
+                {hasRight ?
+                    <li key='right' className="page-item right">
+                        <a className="page-link" href={makePageLink(currentPage + 1)} onClick={handleMoveRight}>
+                            <span>Siguiente</span>
+                        </a>
+                    </li>
+                    :
+                    <li key='right' className="page-item right"/>
+                }
+            </ul>
         </Fragment>
     );
 

src/styles/main.scss

@@ -14,7 +14,7 @@
 body {
   max-width: 75rem;
   margin: 0 auto;
-  padding: 0 1rem 1em 1em;
+  padding: 0 1rem 4rem 1rem;
   font-family: sans-serif;
   color: var(--black);
   overflow-y: scroll;
@@ -76,32 +76,39 @@ h1, h2, h3, h4 {
 ul.pagination {
   display: flex;
   margin: 1rem auto;
+  justify-content: space-between;
+
+  .page-center {
+    display: flex;
+  }
 
   .page-item {
-    height: 2rem;
+    height: 2.5rem;
+    text-align: center;
+
+    &.left, &.right {
+      width: 7rem;
+    }
 
     .page-link {
       display: inline-block;
       height: 100%;
 
-      border: 1px solid var(--gray-2);
-      border-radius: 3px;
       margin-right: .4rem;
-      padding: .5rem 1em;
+      padding: .75rem 1rem;
 
       color: var(--black);
       text-decoration: none;
-      font-size: .75rem;
       line-height: 1;
 
+
       &.active {
-        background-color: var(--accent);
+        color: var(--accent);
-        color: var(--white);
+        border-bottom: 2px solid var(--accent);
       }
 
       &:hover:not(.active) {
-        background-color: var(--gray-2);
+        border-bottom: 2px solid var(--accent);
-        border: 1px solid var(--gray-3);
       }
 
       &:focus {
@@ -112,6 +119,7 @@ ul.pagination {
 
   .spacing {
     margin: auto 1rem;
+    font-weight: normal;
   }
 }
 
@@ -248,3 +256,6 @@ ul.tabs {
   }
 }
 
+*[hidden] {
+ visibility: hidden;
+}