1 estrella en GitHub = 1 componente nuevo.

Dar una estrella

Navegación paginationnavigationglass

Glass Pagination

Control de paginación con acabado glassmorphism y realce luminoso de página activa.

Uso

Copia y pega este código directamente en tu página de Astro:

---
import { GlassPagination } from 'astro-component-kit';
---

<PaginationGlass>Content</PaginationGlass>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/GlassPagination.astro:

---
---
<nav class="pagination">
  <button class="prev">←</button>
  <div class="pages">
    <a href="#" class="active">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <span>...</span>
    <a href="#">12</a>
  </div>
  <button class="next">→</button>
</nav>
<style>
  .pagination { display: flex; align-items: center; gap: 1rem; }
  .pages { display: flex; gap: 0.5rem; background: rgba(0,0,0,0.2); padding: 4px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); }
  .pages a, button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; font-size: 0.8rem; font-weight: 700; color: #94a3b8; text-decoration: none; transition: 0.2s; border: none; background: none; cursor: pointer; }
  .pages a.active { background: #6366f1; color: #fff; }
  .pages a:hover:not(.active) { background: rgba(255,255,255,0.05); color: #fff; }
</style>

Información Rápida

Categoría: Navegación
Nombre de archivo: GlassPagination.astro
Dependencias: Ninguna — Astro nativo + CSS puro
Etiquetas: paginationnavigationglass