Pagination

---
import { Pagination } from '@santi020k/lumen-astro'
---

<div style="display: grid; gap: 1rem;">
  <Pagination>
    <a href="?page=1" rel="prev">Previous</a>
    <a href="?page=1">1</a>
    <a aria-current="page" href="?page=2">2</a>
    <a href="?page=3">3</a>
    <a href="?page=3" rel="next">Next</a>
  </Pagination>

  <Pagination aria-label="Pagination with disabled previous state">
    <button type="button" disabled aria-label="Previous page">Previous</button>
    <a aria-current="page" href="?page=1">1</a>
    <a href="?page=2">2</a>
    <a href="?page=3">3</a>
    <a href="?page=2" rel="next">Next</a>
  </Pagination>
</div>

import { Pagination } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <div style={{ display: 'grid', gap: '1rem' }}>
      <Pagination>
        <a href="?page=1" rel="prev">Previous</a>
        <a href="?page=1">1</a>
        <a aria-current="page" href="?page=2">2</a>
        <a href="?page=3">3</a>
        <a href="?page=3" rel="next">Next</a>
      </Pagination>

      <Pagination aria-label="Pagination with disabled previous state">
        <button type="button" disabled aria-label="Previous page">Previous</button>
        <a aria-current="page" href="?page=1">1</a>
        <a href="?page=2">2</a>
        <a href="?page=3">3</a>
        <a href="?page=2" rel="next">Next</a>
      </Pagination>
    </div>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<div style="display: grid; gap: 1rem;">
  <lumen-pagination>
    <a href="?page=1" rel="prev">Previous</a>
    <a href="?page=1">1</a>
    <a aria-current="page" href="?page=2">2</a>
    <a href="?page=3">3</a>
    <a href="?page=3" rel="next">Next</a>
  </lumen-pagination>

  <lumen-pagination aria-label="Pagination with disabled previous state">
    <button type="button" disabled aria-label="Previous page">Previous</button>
    <a aria-current="page" href="?page=1">1</a>
    <a href="?page=2">2</a>
    <a href="?page=3">3</a>
    <a href="?page=2" rel="next">Next</a>
  </lumen-pagination>
</div>