All files / packages/design-system-2-site/src/components Pager.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25x
 
22x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import Link from 'next/link';
import { ArrowLeftIcon, ArrowRightIcon } from './icons';
 
export interface PagerLink {
  name: string;
  url: string;
}
 
/**
 * Prev / Next page navigation. Each link shows a "Previous" / "Next" label with
 * a sliding arrow above the target page title. Renders nothing when neither
 * neighbor exists.
 */
export function Pager({ prev, next }: { prev?: PagerLink | null; next?: PagerLink | null }) {
  if (!prev && !next) return null;
 
  return (
    <nav className="pager" aria-label="Previous and next pages">
      {prev && (
        <Link href={prev.url} className="pager__item pager__item--prev">
          <span className="pager__label">
            <ArrowLeftIcon className="pager__arrow" aria-hidden="true" />
            Previous
          </span>
          <span className="pager__title">{prev.name}</span>
        </Link>
      )}
      {next && (
        <Link href={next.url} className="pager__item pager__item--next">
          <span className="pager__label">
            Next
            <ArrowRightIcon className="pager__arrow" aria-hidden="true" />
          </span>
          <span className="pager__title">{next.name}</span>
        </Link>
      )}
    </nav>
  );
}