@age/quantum/Pagination/sub-components/PageButton.js

Catho react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _theme = require("../../shared/theme");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var PageButton = _styledComponents.default.a.withConfig({
  displayName: "PageButton",
  componentId: "wvds0i-0"
})(["font-weight:bold;align-items:center;border-radius:10px;box-sizing:border-box;cursor:pointer;display:flex;justify-content:center;min-height:40px;min-width:40px;outline:none;text-decoration:none;transition:background-color 0.2s ease-in-out,border-color 0.2s ease-in-out,color 0.2s ease-in-out;user-select:none;", ""], function (_ref) {
  var active = _ref.active,
      _ref$theme = _ref.theme,
      baseFontSize = _ref$theme.baseFontSize,
      _ref$theme$colors = _ref$theme.colors,
      _ref$theme$colors$neu = _ref$theme$colors.neutral,
      neutral0 = _ref$theme$colors$neu[0],
      neutral300 = _ref$theme$colors$neu[300],
      neutral700 = _ref$theme$colors$neu[700],
      _ref$theme$colors$pri = _ref$theme$colors.primary,
      primary100 = _ref$theme$colors$pri[100],
      primary700 = _ref$theme$colors$pri[700],
      primary900 = _ref$theme$colors$pri[900],
      _ref$theme$spacing = _ref$theme.spacing,
      xxsmall = _ref$theme$spacing.xxsmall,
      xsmall = _ref$theme$spacing.xsmall;
  return "\n    background-color: ".concat(active ? primary700 : neutral0, ";\n    border: 1px solid ").concat(active ? primary700 : neutral300, ";\n    color: ").concat(active ? neutral0 : neutral700, ";\n    font-size: ").concat(baseFontSize, "px;\n    margin: 0 ").concat(xxsmall, "px;\n    padding: ").concat(xxsmall, "px ").concat(xsmall, "px;\n\n    :hover,\n    :focus {\n      background-color: ").concat(active ? primary900 : primary100, ";\n      border-color: ").concat(active ? primary900 : primary700, ";\n      color: ").concat(active ? neutral0 : primary700, ";\n    }\n  ");
});

PageButton.displayName = 'PageButton';
PageButton.propTypes = {
  active: _propTypes.default.bool,
  tabIndex: _propTypes.default.number,
  children: _propTypes.default.number.isRequired,
  onClick: _propTypes.default.func,
  theme: _propTypes.default.shape({
    baseFontSize: _propTypes.default.number,
    colors: _propTypes.default.object,
    spacing: _propTypes.default.object
  })
};
PageButton.defaultProps = {
  active: false,
  onClick: function onClick() {},
  theme: {
    baseFontSize: _theme.baseFontSize,
    colors: _theme.colors,
    spacing: _theme.spacing
  }
};
var _default = PageButton;
exports.default = _default;