{"size": 1014, "ext": "js", "max_stars_repo_path": "src/components/control/control.js", "max_stars_repo_name": "mcli830/sorting-visualizer", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/control/control.js", "max_issues_repo_name": "mcli830/sorting-visualizer", "max_issues_repo_issues_event_min_datetime": "2021-03-10T07:30:15.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T23:35:49.000Z", "max_forks_repo_path": "src/components/control/control.js", "max_forks_repo_name": "mcli830/sorting-visualizer", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 6, "max_forks_count": null, "avg_line_length": 27.4054054054, "max_line_length": 79, "alphanum_fraction": 0.6252465483}
import React from 'react'
import PropTypes from 'prop-types'
import Row from '../ui/row'
import Tab from '../button/tab'
import IconButton from '../button/icon'
import { faSyncAlt } from '@fortawesome/free-solid-svg-icons'
import ScrollMenu from '../menu/scroll'

const Control = ({ algorithms, currentView, handleReset, handleViewInfo }) => {

  return (
    <Row style={{paddingLeft: '.5rem', marginTop: 2}}>
      <IconButton icon={faSyncAlt} onClick={handleReset} />
      <ScrollMenu direction="x" snap="start" fade style={{flex: '1 1 auto'}}>
        {Object.entries(algorithms).map(([key, algo]) => (
          <Tab
            key={key}
            onClick={handleViewInfo(key)}
            active={currentView === key}
          >
            {algo.shortName}
          </Tab>
        ))}
      </ScrollMenu>
    </Row>
  )
}

Control.propTypes = {
  algorithms: PropTypes.object,
  currentView: PropTypes.string,
  handleReset: PropTypes.func,
  handleViewInfo: PropTypes.func,
}

export default Control
