examples/blog-multiple-authors/src/components/Pagination.astro


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

---
export interface Props {
  prevUrl: string;
  nextUrl: string;
}

const { prevUrl, nextUrl } = Astro.props;
---

<style lang="scss">
.nav {
  display: flex;
  margin-right: auto;
  margin-left: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.prev,
.next {
  display: block;
  text-transform: uppercase;
  font-size: 0.8em;

  &[href="#"] {
    display: none;
  }
}

.prev {
  margin-right: auto;
}

.next {
  margin-left: auto;
}
</style>

<div class="wrapper">
  <nav class="nav">
    <a class="prev" href={prevUrl || '#'} aria-label="Previous Page">Prev</a>
    <a class="next" href={nextUrl || '#'} aria-label="Next Page">Next</a>
  </nav>
</div>