Pagination component

[jairovg]

What problem does this feature solve?

A clear and concise description of what the problem is.

Describe the solution you'd like

• The next or previous page buttons will be disabled if the current page is the last or the first page respectively.
• Underline the page where the user hovers the mouse and use the same color as the current page for the hover state in the next and previous buttons.
• The component should follow the ARIA best practices. Note: The page suggest the use of a role=navigation but the nav element already communicates that the element has a role of navigation.

What does the proposed API look like?

<!--
const items = [
  {
    page: 1,
    href: '?p=1',
  },
  {
    page: 2,
    href: '?p=2',
  },
  {
    page: 3,
    href: '?p=3',
  },
];
const currentPage = 2;
const totalPages=3;
-->
<pagination
  current-page="currentPage"
  items="items"
  total-pages="totalPages"
  onChange="changeHandler"
/>

Additional context

The visual requirements may be found in the UpLabs page.

[jairovg]

It's better to handle an anchor with aria-disabled state in the current page instead return just the page number.