json-joy
Version:
Collection of libraries for building collaborative editing apps.
36 lines (35 loc) • 973 B
JavaScript
// biome-ignore lint: React is used for JSX
import * as React from 'react';
import { rule, theme } from 'nano-theme';
const labelClass = rule({
...theme.font.mono.bold,
d: 'flex',
ai: 'center',
fz: '9px',
pd: '0 4px',
mr: '-1px',
bdrad: '10px',
bg: 'rgba(0,0,0)',
lh: '14px',
h: '14px',
col: 'white',
bd: '1px solid #fff',
});
const labelSecondClass = rule({
...theme.font.mono.bold,
d: 'flex',
fz: '8px',
mr: '2px -2px 2px 4px',
pd: '0 4px',
bdrad: '10px',
bg: 'rgba(255,255,255)',
lh: '10px',
h: '10px',
col: '#000',
});
export const DebugLabel = ({ right, small, children }) => {
const style = small ? { fontSize: '7px', lineHeight: '10px', height: '10px', padding: '0 2px' } : void 0;
return (React.createElement("span", { className: labelClass, style: style },
children,
!!right && React.createElement("span", { className: labelSecondClass }, right)));
};