jobiqo-cl/lib/es/src/components/02-atoms/08-navigation/03-pager/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

import { __rest } from '../../../../../node_modules/tslib/tslib.es6.js';
import { createElement } from 'react';
import styled from 'styled-components';

/**
 * @file index.tsx
 *
 * @fileoverview Pager component. Renders a list of links as a pager.
 */
const StyledPager = styled.ul `
  display: flex;
  list-style: none;
  padding-left: 0;
  margin: ${props => props.theme.pagination.list.margin};

  li {
    margin-left: ${props => props.theme.pagination.list.separator};
    a,
    button {
      color: ${props => props.theme.pagination.item.color};
      background: ${props => props.theme.pagination.item.background};
      padding: ${props => props.theme.pagination.item.padding};
      border-width: ${props => props.theme.pagination.item.borderWidth};
      border-style: ${props => props.theme.pagination.item.borderStyle};
      border-color: ${props => props.theme.pagination.item.borderColor};
      &:hover {
        background: ${props => props.theme.pagination.item.hover.background};
        color: ${props => props.theme.pagination.item.hover.color};
      }
      &.active {
        background: ${props => props.theme.pagination.item.active.background};
        color: ${props => props.theme.pagination.item.active.color};
        border-color: ${props => props.theme.pagination.item.active.borderColor};
      }
    }
  }
`;
/**
 * Styles a list of items (anchors inside a list) with the theme provided by the theme object, in the form of a pager.
 */
const Pager = (_a) => {
    var { children } = _a, props = __rest(_a, ["children"]);
    return createElement(StyledPager, Object.assign({}, props), children);
};

export { Pager };