syntax-lab/src/ui/SpanChip.tsx

21 lines
573 B
TypeScript

import type { CodePointSpan } from 'source-region';
import { spanLabel } from './format';
import type { HoverTarget } from './types';
export function SpanChip(props: {
label: string;
span: CodePointSpan;
onHover: (target: HoverTarget | undefined) => void;
}) {
return (
<button
class="span-chip"
type="button"
onMouseEnter={() => props.onHover({ label: props.label, span: props.span })}
onMouseLeave={() => props.onHover(undefined)}
>
<span>{props.label}</span>
<span>{spanLabel(props.span)}</span>
</button>
);
}