Files
automatisch/packages/web/src/components/Slate/Variable.tsx
2023-06-12 14:06:13 +02:00

29 lines
700 B
TypeScript

import Chip from '@mui/material/Chip';
import { useSelected, useFocused } from 'slate-react';
export default function Variable({ attributes, children, element, disabled }: any) {
const selected = useSelected();
const focused = useFocused();
const label = (
<>
<span style={{ fontWeight: 500 }}>{element.name}</span>: <span style={{ fontWeight: 300 }}>{element.sampleValue}</span>
{children}
</>
);
return (
<Chip
{...attributes}
disabled={disabled}
component="span"
contentEditable={false}
style={{
boxShadow: selected && focused ? '0 0 0 2px #B4D5FF' : 'none',
}}
size="small"
label={label}
/>
);
};