mdx-deck-theme-garlic/dist/components/Provider.js

garlic theme for mdx-deck

"use strict";

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

var _react = _interopRequireDefault(require("react"));

var _styled = _interopRequireDefault(require("@emotion/styled"));

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

var _react2 = require("@mdx-js/react");

var _themeUi = require("theme-ui");

var _prism = _interopRequireDefault(require("@theme-ui/prism"));

var _mdxDeck = require("mdx-deck");

var _Contour = _interopRequireDefault(require("../layouts/Contour"));

var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));

var _Icon = _interopRequireDefault(require("./Icon.css"));

var _CodeSandbox = _interopRequireDefault(require("./CodeSandbox"));

var _Frame = _interopRequireDefault(require("./Frame"));

var _Column = _interopRequireDefault(require("./Column"));

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

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  position: fixed;\n  right: 0;\n  top: 0;\n  margin: 1rem;\n  z-index: 1;\n  font-size: 1.5rem;\n  color: ", ";\n  text-decoration: none;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var components = {
  // eslint-disable-next-line react/display-name
  pre: function pre(_ref) {
    var children = _ref.children;
    return _react["default"].createElement(_react["default"].Fragment, null, children);
  },
  code: _prism["default"]
};
var shortcodes = {
  Contour: _Contour["default"],
  CodeSandbox: _CodeSandbox["default"],
  Frame: _Frame["default"],
  Column: _Column["default"]
};

var StyledTag = _styled["default"].a(_templateObject(), function (_ref2) {
  var theme = _ref2.theme;
  return theme.colors.text || 'thistle';
});

var StyledLayout = _styled["default"].main(_templateObject2(), function (_ref3) {
  var theme = _ref3.theme;
  return theme.fonts.body;
});

var Provider = function Provider(props) {
  var _useThemeUI = (0, _themeUi.useThemeUI)(),
      theme = _useThemeUI.theme;

  var deck = (0, _mdxDeck.useDeck)();
  var Logo = props.logo,
      logoUrl = props.logoUrl,
      author = props.author,
      authorUrl = props.authorUrl,
      children = props.children;
  return _react["default"].createElement(StyledLayout, null, Logo && logoUrl ? _react["default"].createElement(_Icon["default"], {
    href: logoUrl,
    target: "_blank",
    theme: theme
  }, Logo ? _react["default"].createElement(Logo, {
    theme: theme
  }) : null) : null, author && authorUrl ? _react["default"].createElement(StyledTag, {
    href: authorUrl,
    target: "_blank",
    theme: theme
  }, author) : null, _react["default"].createElement(_themeUi.ThemeProvider, {
    theme: theme,
    components: components
  }, _react["default"].createElement(_react2.MDXProvider, {
    components: shortcodes
  }, children)), _react["default"].createElement(_ProgressBar["default"], {
    percent: Math.floor(100 / (deck.length - 1) * deck.index)
  }));
};

Provider.propTypes = {
  logo: _propTypes["default"].func,
  logoUrl: _propTypes["default"].string,
  author: _propTypes["default"].string,
  authorUrl: _propTypes["default"].string
};
Provider.defaultProps = {
  logo: null,
  logoUrl: '#',
  author: null,
  authorUrl: '#'
};
var _default = Provider;
exports["default"] = _default;