renderArcaneChip function

Component renderArcaneChip(ArcaneChipProps props)

Renders a Codex chip component.

Implementation

Component renderArcaneChip(ArcaneChipProps props) {
  return dom.button(
    classes: 'codex-chip ${props.selected ? 'selected' : ''} ${props.disabled ? 'disabled' : ''}',
    styles: dom.Styles(raw: {
      'display': 'inline-flex',
      'align-items': 'center',
      'gap': '8px',
      'padding': '8px 14px',
      'border-radius': 'var(--arcane-radius-full)',
      'font-size': 'var(--font-size-sm)',
      'border': props.selected
          ? '1px solid var(--primary)'
          : '1px solid var(--border)',
      'background-color': props.selected
          ? 'rgba(var(--primary-rgb), 0.1)'
          : 'var(--card)',
      'color': props.selected ? 'var(--primary)' : 'var(--foreground)',
      'cursor': props.disabled ? 'not-allowed' : 'pointer',
      'opacity': props.disabled ? '0.5' : '1',
      'transition': 'all var(--arcane-transition)',
      if (props.selected) 'box-shadow': '0 0 15px rgba(var(--primary-rgb), 0.15)',
    }),
    events: {
      'click': (event) {
        if (!props.disabled && props.onTap != null) {
          props.onTap!();
        }
      },
    },
    [
      if (props.avatar != null) props.avatar!,
      Component.text(props.label),
      if (props.deleteIcon != null && props.onDeleted != null)
        dom.button(
          styles: const dom.Styles(raw: {
            'display': 'flex',
            'align-items': 'center',
            'margin-left': '0.5rem',
            'color': 'inherit',
            'opacity': '0.7',
            'background': 'none',
            'border': 'none',
            'padding': '0',
            'cursor': 'pointer',
          }),
          events: {
            'click': (event) {
              event.stopPropagation();
              props.onDeleted!();
            },
          },
          [props.deleteIcon!],
        ),
    ],
  );
}