{"size": 1866, "ext": "js", "max_stars_repo_path": "client/src/components/container/container.js", "max_stars_repo_name": "CesarOCampos/Project3-TaskMaster", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/components/container/container.js", "max_issues_repo_name": "CesarOCampos/Project3-TaskMaster", "max_issues_repo_issues_event_min_datetime": "2021-05-12T18:50:39.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-20T19:10:53.000Z", "max_forks_repo_path": "client/src/components/container/container.js", "max_forks_repo_name": "CesarOCampos/Project3-TaskMaster", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 20, "max_forks_count": null, "avg_line_length": 27.0434782609, "max_line_length": 109, "alphanum_fraction": 0.4249732047}
import React from 'react';
import { Link } from 'react-router-dom';
import Board from '../board/board';


import './style.css';

class Container extends React.Component
{
    constructor(props) {
        super(props);

        this.state = {
            color: "#000000",
            size: "5"
        }
    }

    changeColor(params) {
        this.setState({
            color: params.target.value
        })
    }

    changeSize(params) {
        this.setState({
            size: params.target.value
        })
    }

        

    render() {

        return (
            <div className="container">
                <div className="tools-section">
                    <div className="color-picker-container">
                        Select Brush Color : &nbsp; 
                        <input type="color" value={this.state.color} onChange={this.changeColor.bind(this)}/>
                    </div>

                    <div className="brushsize-container">
                        Select Brush Size : &nbsp; 
                        <select value={this.state.size} onChange={this.changeSize.bind(this)}>
                            <option> 5 </option>
                            <option> 10 </option>
                            <option> 15 </option>
                            <option> 20 </option>
                            <option> 25 </option>
                            <option> 30 </option>
                        </select>
                    </div>

                    <div>
                        <Link to="/" className="btn btn-secondary">return</Link>
                    </div>

                </div>
                
                <div className="board-container">
                    <Board color={this.state.color} size={this.state.size}></Board>
                </div>
            </div>
        )
    }
}

export default Container