json-joy
Version:
Collection of libraries for building collaborative editing apps.
30 lines (29 loc) • 820 B
JavaScript
// biome-ignore lint: React is used for JSX
import * as React from 'react';
import { rule, drule, theme, useTheme } from 'nano-theme';
const blockClass = drule({
...theme.font.mono.mid,
fz: '.9em',
pdt: '.05em',
pdb: '.05em',
});
const startClass = rule({
borderTopLeftRadius: '.3em',
borderBottomLeftRadius: '.3em',
pdl: '.24em',
});
const endClass = rule({
borderTopRightRadius: '.3em',
borderBottomRightRadius: '.3em',
pdr: '.24em',
});
export const Code = (props) => {
const { children, attr } = props;
const theme = useTheme();
const className = blockClass({
bg: theme.g(0.2, 0.1),
}) +
(attr.isStart() ? startClass : '') +
(attr.isEnd() ? endClass : '');
return React.createElement("span", { className: className }, children);
};