creado componente para las rows y mejorado el pagination stepper

Front/src/Componentes/PaginacionStepper.svelte

@@ -3,25 +3,45 @@
 
     let {currentPag,
          cantpag,
-         queryPag
+         queryPag,
+         centrado = false
         }:{
          currentPag: number,
          cantpag: number,
-         queryPag: (a:number) => void} = $props();
+         queryPag: (a:number) => void,
+         centrado:boolean
+        } = $props();
+    
+        function getVisiblePages() {
+        if (!centrado || cantpag <= 5) {
+            return Array.from({ length: cantpag }, (_, i) => i + 1);
+        }
+
+        if (currentPag <= 3) {
+            return [1, 2, 3, 4, 5];
+        } else if (currentPag >= cantpag - 2) {
+            return [cantpag - 4, cantpag - 3, cantpag - 2, cantpag - 1, cantpag];
+        } else {
+            return [currentPag - 2, currentPag - 1, currentPag, currentPag + 1, currentPag + 2];
+        }
+    }
+    let visiblePages = $derived.by(getVisiblePages);
+
     
-    let array = $derived.by(()=> Array.from({ length: cantpag }, (_, i) => i + 1));
 </script>
 
-{#if cantpag>0}
-<nav aria-label="Page navigation example">
+{#if cantpag > 1}
+<nav aria-label="Paginador">
     <ul class="pagination">
-        {#each array as num }
-        {#if currentPag !== num}
-        <li class="page-item"><a class="page-link" href="#" onclick={()=>queryPag(num)}>{String(num)}</a></li>
-        {:else}
-        <li class="page-item"><a class="page-link active" href="#" onclick={()=>queryPag(num)}>{String(num)}</a></li>
-        {/if}
+        <li class="page-item {currentPag === 1 ? 'disabled' : ''}">
+            <a class="page-link" href="#" onclick={() => currentPag > 1 && queryPag(currentPag - 1)}>Anterior</a>
+        </li>
+        {#each visiblePages as num }
+        <li class="page-item"><a class="page-link" class:active={currentPag === num} href="#" onclick={()=>queryPag(num)}>{String(num)}</a></li>
         {/each}
+        <li class="page-item {currentPag === cantpag ? 'disabled' : ''}">
+            <a class="page-link" href="#" onclick={() => currentPag < cantpag && queryPag(currentPag + 1)}>Siguiente</a>
+        </li>
     </ul>
 </nav>
 {/if}