@uiw/react-markdown-preview-example
Version:
Preview the markdown files and run the React examples in the documentation.
97 lines (96 loc) • 5.72 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NavMenu = NavMenu;
exports.NavMenuView = NavMenuView;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = require("react");
var _reactGithubCorners = _interopRequireDefault(require("@uiw/react-github-corners"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _store = require("./store");
var _ = require("./");
var _Logo = require("./Logo");
var _jsxRuntime = require("react/jsx-runtime");
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
function NavMenu(props) {
(0, _react.useEffect)(function () {
return _store.store.setNavMenu(props);
}, [props]);
return null;
}
var Nav = _styledComponents["default"].nav(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n position: fixed;\n width: 100%;\n backdrop-filter: saturate(180%) blur(0.4rem);\n border-bottom: 1px solid var(--color-neutral-muted, #30363d);\n z-index: 99;\n top: 0;\n left: 0;\n"])));
var NavInner = _styledComponents["default"].article(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n padding-left: 10px;\n padding-right: 10px;\n max-width: 960px;\n margin: 0 auto;\n @media (min-width: 1024px) {\n max-width: 62rem;\n }\n"])));
var Logo = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n font-weight: bold;\n display: flex;\n color: var(--color-theme-text);\n align-items: center;\n height: 24px;\n padding: 10px 0;\n svg {\n width: 23px;\n height: 23px;\n margin: initial !important;\n }\n"])));
var Menus = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n gap: 0.65rem;\n a {\n color: var(--color-fg-muted);\n text-decoration: none;\n transition: all 0.2s ease-in-out 0s;\n &:hover {\n color: var(--color-fg-default);\n }\n }\n"])));
var Title = _styledComponents["default"].h2(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n font-weight: 900;\n font-size: 1.2em;\n margin: 0;\n margin-left: 0.55rem;\n white-space: nowrap;\n"])));
var GithubHref = _styledComponents["default"].a(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n color: var(--color-fg-default);\n svg {\n margin-top: 2px;\n }\n"])));
function NavMenuView(props) {
var disableDarkMode = props.disableDarkMode,
disableCorners = props.disableCorners,
version = props.version,
logo = props.logo;
var store = (0, _store.useStores)();
if (store.navMenu) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Nav, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavInner, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Logo, {
children: [store.navMenu.logo || logo || _Logo.Logo, store.navMenu.title && /*#__PURE__*/(0, _jsxRuntime.jsx)(Title, {
children: store.navMenu.title
}), version && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SupVersion, {
style: {
position: 'initial',
marginTop: '-0.7.em'
},
children: version
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Menus, {
children: [store.navMenu.menus && store.navMenu.menus.map(function (item, idx) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {
children: item
}, idx);
}), !disableCorners && /*#__PURE__*/(0, _jsxRuntime.jsx)(GithubHref, {
href: store.corners.href,
target: "_blank",
rel: "noopener noreferrer",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
width: "18px",
strokeLinecap: "round",
strokeLinejoin: "round",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
d: "M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
})
})
}), !disableDarkMode && /*#__PURE__*/(0, _jsxRuntime.jsx)("dark-mode", (0, _objectSpread2["default"])({
permanent: true,
style: {
fontSize: 19
}
}, store.darkMode))]
})]
})
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
children: [!disableDarkMode && /*#__PURE__*/(0, _jsxRuntime.jsx)("dark-mode", (0, _objectSpread2["default"])({
permanent: true,
style: {
position: 'fixed',
top: 8,
left: 12,
zIndex: 99,
fontSize: 28
}
}, store.darkMode)), !disableCorners && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactGithubCorners["default"], (0, _objectSpread2["default"])({
fixed: true,
target: "__blank",
zIndex: 10
}, store.corners))]
});
}