Update pagination to handle any number of pages

packages/builder/src/components/backend/DataTable/TablePagination.svelte

@@ -1,11 +1,13 @@
 <script>
   export let data
-  export let currentPage
+  export let currentPage = 0
   export let pageItemCount
   export let ITEMS_PER_PAGE
 
   let numPages = 0
   $: numPages = Math.ceil((data?.length ?? 0) / ITEMS_PER_PAGE)
+  $: displayAllPages = numPages <= 10
+  $: pagesAroundCurrent = getPagesAroundCurrent(currentPage, numPages)
 
   const next = () => {
     if (currentPage + 1 === numPages) return
@@ -20,18 +22,53 @@
   const selectPage = page => {
     currentPage = page
   }
+
+  function getPagesAroundCurrent(current, max) {
+    console.log(current)
+    const start = Math.max(current - 2, 1)
+    const end = Math.min(current + 2, max - 2)
+    let pages = []
+    for (let i = start; i <= end; i++) {
+      pages.push(i)
+    }
+    return pages
+  }
 </script>
 
 <div class="pagination">
   <div class="pagination__buttons">
     <button on:click={previous} disabled={currentPage === 0}>&lt;</button>
-    {#each Array(numPages) as _, idx}
+    {#if displayAllPages}
+      {#each Array(numPages) as _, idx}
+        <button
+          class:selected={idx === currentPage}
+          on:click={() => selectPage(idx)}>
+          {idx + 1}
+        </button>
+      {/each}
+    {:else}
+      <button class:selected={currentPage === 0} on:click={() => selectPage(0)}>
+        1
+      </button>
+      {#if currentPage > 3}
+        <button disabled>...</button>
+      {/if}
+      {#each pagesAroundCurrent as idx}
+        <button
+          class:selected={idx === currentPage}
+          on:click={() => selectPage(idx)}>
+          {idx + 1}
+        </button>
+      {/each}
+      {#if currentPage < numPages - 4}
+        <button disabled>...</button>
+      {/if}
       <button
-        class:selected={idx === currentPage}
-        on:click={() => selectPage(idx)}>
-        {idx + 1}
+        class:selected={currentPage === numPages - 1}
+        on:click={() => selectPage(numPages - 1)}>
+        {numPages}
       </button>
-    {/each}
+    {/if}
     <button
       on:click={next}
       disabled={currentPage === numPages - 1 || numPages === 0}>
@@ -65,7 +102,8 @@
 
   .pagination__buttons button {
     display: inline-block;
-    padding: var(--spacing-s) var(--spacing-m);
+    padding: var(--spacing-s) 0;
+    text-align: center;
     margin: 0;
     background: #fff;
     border: none;
@@ -74,6 +112,9 @@
     text-transform: capitalize;
     min-width: 20px;
     transition: 0.3s background-color;
+    font-family: var(--font-sans);
+    color: var(--grey-6);
+    width: 40px;
   }
   .pagination__buttons button:last-child {
     border-right: none;
@@ -83,11 +124,13 @@
     background-color: var(--grey-1);
   }
   .pagination__buttons button.selected {
-    background: var(--grey-2);
+    background: var(--blue);
+    color: white;
   }
 
   p {
     font-size: var(--font-size-s);
     margin: var(--spacing-xl) 0;
+    color: var(--grey-6);
   }
 </style>