<commit_before>import * as React from 'react'
import * as rs from '@respace/common'
import { observer } from 'mobx-react'
import { Row, Col, ListGroupItem } from 'react-bootstrap'
import FaCode from 'react-icons/fa/code'
import classnames from 'classnames'
import { addTooltip } from '../util'

export interface IComponentItemProps {
  uiStore: rs.IUIStore
  component: rs.AnyComponent
  layoutStore: rs.ILayoutStore
}

function ComponentItem({ uiStore,
  layoutStore, component }: IComponentItemProps) {
  const factory = uiStore.getFactory(component.name)
  let icon
  if (factory && factory.icon)  {
    icon = React.createElement(factory.icon)
  } else {
    icon = <FaCode />
  }
  const iconWithTooltip = addTooltip(icon,
    component.displayName, !uiStore.isSidebarToggled)
  const handleClick = () => {
    layoutStore.addComponent(component)
  }
  const classes = classnames('list-group-item', 'item', {
    'item-active': component.isActive
  })
  return (
    <ListGroupItem href='#' bsClass={classes}>
      <Row onClick={handleClick}>
        <Col xs={2}>{ iconWithTooltip }</Col>
        { uiStore.isSidebarToggled &&
          <Col xs={10}>
            { component.displayName}
          </Col>
        }
      </Row>
    </ListGroupItem>
  )
}

export default observer(ComponentItem)<commit_msg>Remove href in anchor<commit_after>import * as React from 'react'
import * as rs from '@respace/common'
import { observer } from 'mobx-react'
import { Row, Col, ListGroupItem } from 'react-bootstrap'
import FaCode from 'react-icons/fa/code'
import classnames from 'classnames'
import { addTooltip } from '../util'

export interface IComponentItemProps {
  uiStore: rs.IUIStore
  component: rs.AnyComponent
  layoutStore: rs.ILayoutStore
}

function ComponentItem({ uiStore,
  layoutStore, component }: IComponentItemProps) {
  const factory = uiStore.getFactory(component.name)
  let icon
  if (factory && factory.icon)  {
    icon = React.createElement(factory.icon)
  } else {
    icon = <FaCode />
  }
  const iconWithTooltip = addTooltip(icon,
    component.displayName, !uiStore.isSidebarToggled)
  const handleClick = () => {
    layoutStore.addComponent(component)
  }
  const classes = classnames('list-group-item', 'item', {
    'item-active': component.isActive
  })
  return (
    <ListGroupItem bsClass={classes}>
      <Row onClick={handleClick}>
        <Col xs={2}>{ iconWithTooltip }</Col>
        { uiStore.isSidebarToggled &&
          <Col xs={10}>
            { component.displayName}
          </Col>
        }
      </Row>
    </ListGroupItem>
  )
}

export default observer(ComponentItem)
{'fraction_non_alphanumeric': 0.12276019824628288, 'fraction_numerical': 0.002287457110179184, 'mean_word_length': 3.455008488964346, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4884457', 'n_tokens_mistral': 814, 'n_tokens_neox': 809, 'n_words': 189}