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

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CodeblockLayout = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const blockClass = (0, nano_theme_1.rule)({
    ...nano_theme_1.theme.font.mono,
    d: 'block',
    bdrad: '5px',
    trs: 'background 0.6s ease 0s',
    fz: '.9em',
    lh: 1.3,
    overflowY: 'hidden',
    bd: '1px solid transparent',
    pad: '16px !important',
    '@media (max-width: 800px)': {
        pad: '8px !important',
    },
});
const blockCompactClass = (0, nano_theme_1.rule)({
    pad: `${nano_theme_1.theme.g(0.2)}px ${nano_theme_1.theme.g(0.3)}px !important`,
});
const CodeblockLayout = ({ compact, children, ...rest }) => {
    const dynamicBlockClass = (0, nano_theme_1.useRule)((theme) => ({
        col: theme.g(0.3),
        bg: theme.g(0, 0.02),
        '&:hover': {
            bg: theme.bg,
            bd: `1px solid ${theme.g(0, 0.04)}`,
        },
    }));
    const blockStyle = {};
    return (React.createElement("pre", { ...rest, className: (rest.className ?? '') + blockClass + dynamicBlockClass + (compact ? blockCompactClass : ''), style: { ...rest.style, ...blockStyle } }, children));
};
exports.CodeblockLayout = CodeblockLayout;