@uiw/react-markdown-preview-example
Version:
Preview the markdown files and run the React examples in the documentation.
89 lines • 4.79 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
import { Fragment, useEffect } from 'react';
import GitHubCorners from '@uiw/react-github-corners';
import styled from 'styled-components';
import { store, useStores } from './store';
import { SupVersion } from './';
import { Logo as LogoIcon } from './Logo';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function NavMenu(props) {
useEffect(() => store.setNavMenu(props), [props]);
return null;
}
var Nav = styled.nav(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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 = styled.article(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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 = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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 = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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 = styled.h2(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n font-weight: 900;\n font-size: 1.2em;\n margin: 0;\n margin-left: 0.55rem;\n white-space: nowrap;\n"])));
var GithubHref = styled.a(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n color: var(--color-fg-default);\n svg {\n margin-top: 2px;\n }\n"])));
export function NavMenuView(props) {
var {
disableDarkMode,
disableCorners,
version,
logo
} = props;
var store = useStores();
if (store.navMenu) {
return /*#__PURE__*/_jsx(Nav, {
children: /*#__PURE__*/_jsxs(NavInner, {
children: [/*#__PURE__*/_jsxs(Logo, {
children: [store.navMenu.logo || logo || LogoIcon, store.navMenu.title && /*#__PURE__*/_jsx(Title, {
children: store.navMenu.title
}), version && /*#__PURE__*/_jsx(SupVersion, {
style: {
position: 'initial',
marginTop: '-0.7.em'
},
children: version
})]
}), /*#__PURE__*/_jsxs(Menus, {
children: [store.navMenu.menus && store.navMenu.menus.map((item, idx) => {
return /*#__PURE__*/_jsx(Fragment, {
children: item
}, idx);
}), !disableCorners && /*#__PURE__*/_jsx(GithubHref, {
href: store.corners.href,
target: "_blank",
rel: "noopener noreferrer",
children: /*#__PURE__*/_jsx("svg", {
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
width: "18px",
strokeLinecap: "round",
strokeLinejoin: "round",
children: /*#__PURE__*/_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__*/_jsx("dark-mode", _extends({
permanent: true,
style: {
fontSize: 19
}
}, store.darkMode))]
})]
})
});
}
return /*#__PURE__*/_jsxs(Fragment, {
children: [!disableDarkMode && /*#__PURE__*/_jsx("dark-mode", _extends({
permanent: true,
style: {
position: 'fixed',
top: 8,
left: 12,
zIndex: 99,
fontSize: 28
}
}, store.darkMode)), !disableCorners && /*#__PURE__*/_jsx(GitHubCorners, _extends({
fixed: true,
target: "__blank",
zIndex: 10
}, store.corners))]
});
}