expressjs.com/astro/src/components/patterns/Pagination/Pagination.astro at 00cf88c3c33cd9162ba9acdd0d909a6a6bad2d97 · expressjs/expressjs.com · 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
---
/**
 * Pagination Pattern Component
 *
 * Renders previous/next navigation with a current page indicator.
 *
 * @example
 * <Pagination
 *   prevUrl="/blog"
 *   nextUrl="/blog/3"
 *   currentPage={2}
 *   lastPage={5}
 * />
 */
import './Pagination.css';
import { Icon } from 'astro-icon/components';
import { Flex, Button, Body } from '@components/primitives';
import type { HTMLAttributes } from 'astro/types';

interface Props extends HTMLAttributes<'div'> {
  prevUrl?: string;
  nextUrl?: string;
  currentPage: number;
  lastPage: number;
}

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

<Flex justify="between" align="center" gap="4" class="pagination" {...rest}>
  {
    prevUrl ? (
      <Button as="a" href={prevUrl} variant="secondary" size="md" data-pagination-prev>
        <Icon name="fluent:arrow-left-20-filled" />
        Previous
      </Button>
    ) : (
      <Button variant="secondary" size="md" data-pagination-prev>
        <Icon name="fluent:arrow-left-20-filled" />
        Previous
      </Button>
    )
  }
  <Body vMargin={false} data-pagination-label>
    Page {currentPage} of {lastPage}
  </Body>
  {
    nextUrl ? (
      <Button as="a" href={nextUrl} variant="secondary" size="md" data-pagination-next>
        Next
        <Icon name="fluent:arrow-right-20-filled" />
      </Button>
    ) : (
      <Button variant="secondary" size="md" data-pagination-next>
        Next
        <Icon name="fluent:arrow-right-20-filled" />
      </Button>
    )
  }
</Flex>