Pagination

1'use client';
2
3import * as React from 'react';
4import { Pagination } from '@/components/ui/pagination';
5
6const TOTAL_PAGES = 8;
7
8function pageList(current: number): (number | 'ellipsis')[] {
9  const pages = new Set([1, TOTAL_PAGES, current - 1, current, current + 1]);
10  const sorted = [...pages]
11    .filter((page) => page >= 1 && page <= TOTAL_PAGES)
12    .sort((a, b) => a - b);
13
14  const result: (number | 'ellipsis')[] = [];
15  let previous = 0;
16  for (const page of sorted) {
17    if (page - previous > 1) result.push('ellipsis');
18    result.push(page);
19    previous = page;
20  }
21  return result;
22}
23
24export function Default() {
25  const [page, setPage] = React.useState(4);
26
27  return (
28    <Pagination>
29      <Pagination.Content className="flex-wrap justify-center">
30        <Pagination.Item>
31          <Pagination.Previous
32            disabled={page === 1}
33            onClick={() => setPage((current) => Math.max(1, current - 1))}
34            className="max-sm:w-9 max-sm:px-0 max-sm:[&>span]:sr-only"
35          />
36        </Pagination.Item>
37        {pageList(page).map((item, index) =>
38          item === 'ellipsis' ? (
39            <Pagination.Item key={`ellipsis-${index}`}>
40              <Pagination.Ellipsis />
41            </Pagination.Item>
42          ) : (
43            <Pagination.Item key={item}>
44              <Pagination.Link isActive={item === page} onClick={() => setPage(item)}>
45                {item}
46              </Pagination.Link>
47            </Pagination.Item>
48          ),
49        )}
50        <Pagination.Item>
51          <Pagination.Next
52            disabled={page === TOTAL_PAGES}
53            onClick={() => setPage((current) => Math.min(TOTAL_PAGES, current + 1))}
54            className="max-sm:w-9 max-sm:px-0 max-sm:[&>span]:sr-only"
55          />
56        </Pagination.Item>
57      </Pagination.Content>
58    </Pagination>
59  );
60}

1'use client';
2
3import * as React from 'react';
4import { Pagination } from '@/components/ui/pagination';
5
6const TOTAL_PAGES = 12;
7
8export function Compact() {
9  const [page, setPage] = React.useState(3);
10
11  return (
12    <Pagination>
13      <Pagination.Content>
14        <Pagination.Item>
15          <Pagination.Previous
16            iconOnly
17            disabled={page === 1}
18            onClick={() => setPage((current) => Math.max(1, current - 1))}
19          />
20        </Pagination.Item>
21        <Pagination.Item>
22          <span className="text-muted-foreground px-2 text-sm tabular-nums">
23            Page {page} of {TOTAL_PAGES}
24          </span>
25        </Pagination.Item>
26        <Pagination.Item>
27          <Pagination.Next
28            iconOnly
29            disabled={page === TOTAL_PAGES}
30            onClick={() => setPage((current) => Math.min(TOTAL_PAGES, current + 1))}
31          />
32        </Pagination.Item>
33      </Pagination.Content>
34    </Pagination>
35  );
36}