Automerge backed Markdown editor for the Atmosphere
Something went wrong. Try again.
954 B · 36 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637import type { CSSProperties, KeyboardEvent, ReactNode } from 'react'import './tag-chip.css'
interface TagChipProps { tag: string children?: ReactNode className?: string style?: CSSProperties onClick?: (tag: string) => void}
export function TagChip({ tag, children, className, style, onClick }: TagChipProps) { const interactive = Boolean(onClick) const classes = ['reams-tag-chip', className].filter(Boolean).join(' ')
const handleKeyDown = (event: KeyboardEvent<HTMLSpanElement>) => { if (!interactive) return if (event.key === 'Enter' || event.key === ' ') { event.preventDefault() onClick?.(tag) } }
return ( <span className={classes} style={style} onClick={interactive ? () => onClick?.(tag) : undefined} onKeyDown={handleKeyDown} role={interactive ? 'button' : undefined} tabIndex={interactive ? 0 : undefined} > {children ?? tag} </span> )}