collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
34 lines (33 loc) • 1.12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CodeblockLayout = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const blockClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.mono.mid,
d: 'block',
bdrad: '5px',
trs: 'background 0.6s ease 0s',
fz: '.9em',
lh: 1.3,
bd: '1px solid transparent',
pad: '8px',
mar: 0,
ovx: 'auto',
});
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 }) => {
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.16)}`,
},
}));
return React.createElement("div", { className: blockClass + dynamicBlockClass + (compact ? blockCompactClass : '') }, children);
};
exports.CodeblockLayout = CodeblockLayout;