questions/src/components/Pagination/Pagination.astro at 568c06485f591e6cc6ddcb8f229466df903d7cb0 · CarletonComputerScienceSociety/questions · GitHub

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
---
import { Fragment } from "astro/jsx-runtime";
import "./Pagination.scss";
const { pagination } = Astro.props;

const adjacentLinks = 2;
const maxLinks = adjacentLinks * 2 + 1;
const lowerLimit = adjacentLinks + 1;
const upperLimit = pagination.totalPages - adjacentLinks;
---

{
  pagination.totalPages > 1 && (
    <ul class="pagination">
      {/* First page */}
      {pagination.pageNumber !== 1 && (
        <li class="pagination__item pagination__item--first">
          <a class="pagination__link pagination__link--first" href={1}>
            ««
          </a>
        </li>
      )}

      {/* Previous page */}
      {pagination.hasPrev && (
        <li class="pagination__item pagination__item--previous">
          <a
            href={pagination.prev.url}
            class="pagination__link pagination__link--previous"
          >
            «
          </a>
        </li>
      )}

      {/* Page numbers */}
      {pagination.pagers.map((page) => {
        return (
          <Fragment>
            {(() => {
              const isInRange =
                pagination.totalPages > maxLinks
                  ? pagination.pageNumber < lowerLimit + 1
                    ? page.pageNumber < maxLinks + 1
                    : pagination.pageNumber >= upperLimit
                      ? page.pageNumber > pagination.totalPages - maxLinks
                      : page.pageNumber >=
                          pagination.pageNumber - adjacentLinks &&
                        page.pageNumber <
                          pagination.pageNumber + adjacentLinks + 1
                  : true;

              return (
                isInRange && (
                  <li
                    class={`pagination__item${page.pageNumber === pagination.pageNumber ? " pagination__item--current" : ""}`}
                  >
                    <a href={page.url} class="pagination__link">
                      {page.pageNumber}
                    </a>
                  </li>
                )
              );
            })()}
          </Fragment>
        );
      })}

      {/* Next page */}
      {pagination.hasNext && (
        <li class="pagination__item pagination__item--next">
          <a
            href={pagination.next.url}
            class="pagination__link pagination__link--next"
          >
            »
          </a>
        </li>
      )}

      {/* Last page */}
      {pagination.pageNumber !== pagination.totalPages && (
        <li class="pagination__item pagination__item--last">
          <a
            class="pagination__link pagination__link--last"
            href={pagination.last.url}
          >
            »»
          </a>
        </li>
      )}
    </ul>
  )
}