import React, {Component} from 'react'; import {Form, Row, Col, ButtonGroup, Button} from 'react-bootstrap'; export default class ExploreTokensToolbar extends Component { constructor(props) { super(props); this.state = {isBasicActive: '', isAdvancedActive: 'active-btn'}; } advancedViewSelected = () => { this.setState({isBasicActive: '', isAdvancedActive: 'active-btn'}); this.props.renderExploreView("advanced"); } basicViewSelected = () => { this.setState({isBasicActive: 'active-btn', isAdvancedActive: ''}); this.props.renderExploreView("basic"); } render() { const {isAdvancedActive, isBasicActive} = this.state; return ( <div> <Row className="toolbar-row"> <Col lg={4} xs={4}> <div className="h5 page-header left-align-text">Explore and Swap Tokens</div> </Col> <Col lg={8} xs={8}> <ButtonGroup className={`explore-tokens-toolbar-btngroup`}> <Button className={`explore-toolbar-btn ${isAdvancedActive}`} onClick={this.advancedViewSelected}> Advanced </Button> <Button className={`explore-toolbar-btn ${isBasicActive}`} onClick={this.basicViewSelected}> Basic </Button> </ButtonGroup> </Col> </Row> </div> ) } }