nice-ui/lib/5-block/PageTitle/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const nano_theme_1 = require("nano-theme");
const Space_1 = require("../../3-list-item/Space");
const LinkBack_1 = require("../../2-inline-block/LinkBack");
const blockClass = (0, nano_theme_1.rule)({
    pad: '0 0 16px',
    mar: '0 0 16px',
    d: 'flex',
    justifyContent: 'space-between',
});
const blockClass3 = (0, nano_theme_1.rule)({
    pad: '0 0 8px',
    mar: '0 0 8px',
});
const blockClass5 = (0, nano_theme_1.rule)({
    pad: '0 0 12px',
    mar: 0,
});
const blockClass6 = (0, nano_theme_1.rule)({
    pad: '0 0 12px',
    mar: 0,
});
const useBlockClass = (0, nano_theme_1.makeRule)((theme) => ({
    bdb: `1px solid ${theme.g(0.9)}`,
}));
const headerClass = (0, nano_theme_1.rule)({
    ...nano_theme_1.theme.font.ui2.bold,
    fz: '28px',
    mar: 0,
    pad: 0,
});
const headerClassH2 = (0, nano_theme_1.rule)({
    fz: '24px',
});
const headerClassH3 = (0, nano_theme_1.rule)({
    fz: '20px',
});
const headerClassH4 = (0, nano_theme_1.rule)({
    fz: '18px',
});
const headerClassH5 = (0, nano_theme_1.rule)({
    fz: '16px',
});
const headerClassH6 = (0, nano_theme_1.rule)({
    fz: '15px',
});
const PageTitle = ({ h2, h3, h4, h5, h6, right, back, backTo, children }) => {
    const dynamicBlockClass = useBlockClass();
    const Component = h6 ? 'h6' : h5 ? 'h5' : h4 ? 'h4' : h3 ? 'h3' : h2 ? 'h2' : 'h1';
    return (React.createElement(React.Fragment, null,
        !!back && !!backTo && (React.createElement(React.Fragment, null,
            React.createElement(LinkBack_1.default, { to: backTo }, back),
            React.createElement(Space_1.Space, null))),
        React.createElement("div", { className: blockClass + dynamicBlockClass + (h6 ? blockClass6 : h5 ? blockClass5 : h2 || h3 || h4 ? blockClass3 : ''), style: { borderBottom: h6 || h5 || h4 || h3 || h2 ? 0 : undefined } },
            React.createElement(Component, { className: headerClass +
                    (h6
                        ? headerClassH6
                        : h5
                            ? headerClassH5
                            : h4
                                ? headerClassH4
                                : h3
                                    ? headerClassH3
                                    : h2
                                        ? headerClassH2
                                        : '') }, children),
            right)));
};
exports.default = PageTitle;