lost-sia
Version:
Single Image Annotation Tool
2 lines (1 loc) • 1.13 kB
JavaScript
import{jsxs as f,jsx as n}from"react/jsx-runtime";import{FontAwesomeIcon as m}from"@fortawesome/react-fontawesome";import{faXmark as c}from"@fortawesome/free-solid-svg-icons";const b=({name:s,color:i="#2185d0",size:o=32,style:l={},triangleSize:e=22,onClick:a,onRemove:r})=>{const p={display:"inline-flex",alignItems:"center",backgroundColor:i,color:"#000",height:`${o}px`,fontSize:`${o*.45}px`,padding:"0 1rem 0 0.75rem",border:0,borderRadius:"0 0.25rem 0.25rem 0",marginLeft:`${e/1.4}px`,position:"relative",overflow:"visible",cursor:a?"pointer":"default",...l},d={position:"absolute",left:`-${e/2}px`,width:`${e}px`,height:`${e}px`,backgroundColor:i,transform:"rotate(45deg)",zIndex:-1,pointerEvents:"none"};return f("button",{style:p,onClick:a,children:[n("span",{style:d}),s,r&&n("span",{role:"button",tabIndex:0,onClick:t=>{t.stopPropagation(),r()},onKeyDown:t=>{(t.key==="Enter"||t.key===" ")&&(t.stopPropagation(),r())},style:{marginLeft:"6px",cursor:"pointer",opacity:.6,fontSize:`${o*.4}px`,lineHeight:1,display:"inline-flex",alignItems:"center"},"aria-label":"Remove tag",children:n(m,{icon:c})})]})};export{b as default};