nice-ui
Version:
React design system, components, and utilities
38 lines (37 loc) • 1.96 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const nano_theme_1 = require("nano-theme");
const isFirstLevelBlockElement_1 = require("../../util/isFirstLevelBlockElement");
const MarkdownFullWidthBlock_1 = require("../../util/MarkdownFullWidthBlock");
const MarkdownBlock_1 = require("../../util/MarkdownBlock");
const context_1 = require("../../context");
const content_size_1 = require("../../../context/content-size");
const { useContext } = React;
const headingClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.ui2.lite,
});
const Heading = ({ idx, children }) => {
const theme = (0, nano_theme_1.useTheme)();
const { ast, props } = useContext(context_1.context);
const { width } = (0, content_size_1.useContentSize)();
// const slug = React.useMemo(() => slugify());
const node = ast.nodes[idx];
const headingLevel = node.depth;
const Tag = `h${headingLevel}`;
const fontSizeFactor = width > 1200 ? 1 : width > 1000 ? 0.9 : width > 800 ? 0.8 : 0.7;
const style = {
fontSize: fontSizeFactor * (props.isCompact ? 1.14 : 1.24) ** (6 - headingLevel) + 'em',
// letterSpacing: width > 800 ? (headingLevel - 5) * (props.isCompact ? 0.5 : 1) + 'px' : '0px',
color: theme.isLight ? `rgba(0,0,0,${1 - headingLevel / 15})` : `rgba(255,255,255,${1 - headingLevel / 15})`,
lineHeight: width > 800 ? 1.2 : 1.1,
};
if (!props.isCompact && idx > 1) {
style.paddingTop = '0.5em';
}
const element = (React.createElement(MarkdownBlock_1.default, { idx: idx },
React.createElement(Tag, { className: headingClass, style: style }, children)));
const doCenterAsTopLevelBlock = props.isFullWidth && (0, isFirstLevelBlockElement_1.default)(node, ast);
return doCenterAsTopLevelBlock ? React.createElement(MarkdownFullWidthBlock_1.default, null, element) : element;
};
exports.default = Heading;