@sergiodxa/ui/lib/code.js

UI components for my projects

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

exports.Code = Code;
exports.Pre = Pre;

var _style = require("styled-jsx/style");

var _style2 = _interopRequireDefault(_style);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _palette = require("@sergiodxa/palette");

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

/**
 * @function Code
 * @param {Object} props
 * @param {Object} props.children
 * @param {Object} [props.props={}]
 */
/** @module ui/code */
function Code(_ref) {
  var children = _ref.children,
      props = (0, _objectWithoutProperties3.default)(_ref, ["children"]);

  return _react2.default.createElement(
    "code",
    (0, _extends3.default)({}, props, {
      className: _style2.default.dynamic([["3903918273", [_palette.pink]]]) + " " + (props.className != null && props.className || "")
    }),
    children,
    _react2.default.createElement(_style2.default, {
      styleId: "3903918273",
      css: "code.__jsx-style-dynamic-selector{color:" + _palette.pink + ";font-family:Menlo,Monaco,Lucida Console,Liberation Mono, DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace, serif;font-size:0.8em;white-space:pre-wrap;}code.__jsx-style-dynamic-selector:before{content:\"`\";}code.__jsx-style-dynamic-selector:after{content:\"`\";}code[class~=\"language-javascript\"].__jsx-style-dynamic-selector,code[class~=\"language-js\"].__jsx-style-dynamic-selector,code[class~=\"language-html\"].__jsx-style-dynamic-selector,code[class~=\"language-css\"].__jsx-style-dynamic-selector,code[class~=\"language-styl\"].__jsx-style-dynamic-selector,code[class~=\"language-saas\"].__jsx-style-dynamic-selector,code[class~=\"language-less\"].__jsx-style-dynamic-selector,code[class~=\"language-ruby\"].__jsx-style-dynamic-selector{tab-size:2;}code[class~=\"language-java\"].__jsx-style-dynamic-selector,code[class~=\"language-python\"].__jsx-style-dynamic-selector,code[class~=\"language-php\"].__jsx-style-dynamic-selector{tab-size:4;}code[class~=\"language-go\"].__jsx-style-dynamic-selector{tab-size:8;}",
      dynamic: [_palette.pink]
    })
  );
}

/**
 * @function Pre
 * @param {Object} props
 * @param {Object} props.children
 * @param {Object} [props.props={}]
 */
function Pre(_ref2) {
  var children = _ref2.children,
      props = (0, _objectWithoutProperties3.default)(_ref2, ["children"]);

  return _react2.default.createElement(
    "pre",
    (0, _extends3.default)({}, props, {
      className: _style2.default.dynamic([["2625814629", [_palette.black, _palette.black]]]) + " " + (props.className != null && props.className || "")
    }),
    children,
    _react2.default.createElement(_style2.default, {
      styleId: "2625814629",
      css: "pre.__jsx-style-dynamic-selector{border:1px solid " + _palette.black + ";padding:1rem calc(2rem - 1px);margin:1rem -2rem;overflow-x:scroll;}pre.__jsx-style-dynamic-selector code{color:" + _palette.black + ";font-family:Menlo,Monaco,Lucida Console,Liberation Mono, DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace, serif;font-size:0.8em;}pre.__jsx-style-dynamic-selector code:after,pre.__jsx-style-dynamic-selector code:before{content:\"\";}",
      dynamic: [_palette.black, _palette.black]
    })
  );
}