@swrve/core/src/pagination/Pagination.jsx

Core set of Swrve UI Components

import React from 'react'
import classnames from 'classnames'
import { number, func, oneOfType, string, object, array } from 'prop-types'
import { Icon } from '@swrve/icons'

import PaginationItem from './PaginationItem'
import PaginationNumbers from './PaginationNumbers'

const Pagination = ({
  activePage,
  className,
  numberOfPages,
  onPageChange,
  maxVisibleButtons,
  ...props
}) => {
  const paginationStyles = classnames('sw-pagination', className)
  if (!numberOfPages) return null

  return (
    <nav className={paginationStyles} aria-label="Pagination" {...props}>
      <ul className="flex justify-center">
        <li>
          <PaginationItem
            aria-label="Previous Page"
            className="prev"
            disabled={activePage === 1}
            page={activePage - 1}
            onPageChange={onPageChange}
          >
            <Icon name="arrow" size="small" />
          </PaginationItem>
        </li>

        <PaginationNumbers
          activePage={activePage}
          maxVisibleButtons={maxVisibleButtons}
          numberOfPages={numberOfPages}
          onPageChange={onPageChange}
        />

        <li>
          <PaginationItem
            aria-label="Next Page"
            disabled={activePage === numberOfPages}
            className="next"
            page={activePage + 1}
            onPageChange={onPageChange}
          >
            <Icon name="arrow" size="small" />
          </PaginationItem>
        </li>
      </ul>
    </nav>
  )
}

Pagination.propTypes = {
  /** Pagination Item Content */
  activePage: number,
  /** Additional externs classnames */
  className: oneOfType([string, object, array]),
  /** Pagination max number of page buttons visible */
  maxVisibleButtons: number,
  /** Total number of pages in data */
  numberOfPages: number.isRequired,
  /** Callback when pagination button is click */
  onPageChange: func
}

Pagination.defaultProps = {
  activePage: 1,
  maxVisibleButtons: 10
}

Pagination.displayName = 'Pagination'

export default Pagination