{"size": 2222, "ext": "js", "max_stars_repo_path": "client/src/Components/Skills/index.js", "max_stars_repo_name": "jmmadsen/jmmadsen.github.io", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/Components/Skills/index.js", "max_issues_repo_name": "jmmadsen/jmmadsen.github.io", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/Components/Skills/index.js", "max_forks_repo_name": "jmmadsen/jmmadsen.github.io", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 30.4383561644, "max_line_length": 115, "alphanum_fraction": 0.4689468947}
import React, { Component } from 'react';
import { Container, Row, Col, ButtonToolbar, Button } from 'react-bootstrap';
import Technical from './technical';
import Consulting from './consulting';
import Finance from './finance';

class Skills extends Component {

  constructor(props) {
    super(props);

    this.state = {
      selectedButton: 'technical',
      colorScheme: 'outline-primary'
    }
  }

  render = () => {

    return(
      <header className="App-skills">
        <Container>
          <h1>Skills</h1>
          <br/>
          <Row>
            <Col>
              <ButtonToolbar style={{ justifyContent: 'center' }}>
                <Button 
                  style={{ margin: '10px' }} 
                  size='lg' 
                  variant={this.state.colorScheme}
                  active={ this.state.selectedButton === 'technical' }
                  onClick={ () => this.setState({ selectedButton: 'technical', colorScheme: 'outline-primary' }) }
                >
                  Technical
                </Button>
                <Button 
                  style={{ margin: '10px' }} 
                  size='lg' 
                  variant={this.state.colorScheme}
                  active={ this.state.selectedButton === 'consulting' }
                  onClick={ () => this.setState({ selectedButton: 'consulting', colorScheme: 'outline-success' }) }
                >
                  Consulting
                </Button>
                <Button 
                  style={{ margin: '10px' }} 
                  size='lg' 
                  variant={this.state.colorScheme}
                  active={ this.state.selectedButton === 'finance' }
                  onClick={ () => this.setState({ selectedButton: 'finance', colorScheme: 'outline-danger' }) }
                >
                  Finance
                </Button>
              </ButtonToolbar>
            </Col>
          </Row>
          {
            this.state.selectedButton === 'technical'
            ? <Technical/> 
            : this.state.selectedButton === 'consulting'
            ? <Consulting/> 
            : <Finance/>
          }
        </Container>
      </header>
    )

  }

}

export default Skills;