{"size": 1204, "ext": "js", "max_stars_repo_path": "frontend/src/ui/components/onboarding.js", "max_stars_repo_name": "hawthorne-abendsen/albedo", "max_stars_repo_stars_event_min_datetime": "2021-06-12T00:44:20.000Z", "max_stars_repo_stars_event_max_datetime": "2021-06-12T00:44:20.000Z", "max_issues_repo_path": "frontend/src/ui/components/onboarding.js", "max_issues_repo_name": "hawthorne-abendsen/albedo", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "frontend/src/ui/components/onboarding.js", "max_forks_repo_name": "hawthorne-abendsen/albedo", "max_forks_repo_forks_event_min_datetime": "2021-06-19T21:36:49.000Z", "max_forks_repo_forks_event_max_datetime": "2021-06-19T21:36:49.000Z"}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 23.6078431373, "max_line_length": 102, "alphanum_fraction": 0.5182724252}
import React from 'react'
import PropTypes from 'prop-types'

const OnboardingSteps = [

]

class Onboarding extends React.Component {
    state = {
        step: 0
    }

    static propTypes = {
        onFinish: PropTypes.func.isRequired
    }

    get maxStep() {
        return OnboardingSteps.length - 1
    }

    nextStep(step) {
        if (!step) {
            step = this.state.step
        }
        step++
        this.setState({step})
        if (step > this.maxStep) {
            this.props.onFinish && this.props.onFinish()
        }
    }

    render() {
        const {step} = this.state
        if (step > this.maxStep) return null
        return <>
            <h2>Create Account - Introduction</h2>
            {OnboardingSteps[step]}
            <div className="text-right">
                <button className="button" onClick={() => this.nextStep()}>Next</button>
                {step < this.maxStep &&
                <button className="button button-outline" onClick={() => this.nextStep(this.maxStep)}>
                    Skip introduction
                </button>}
            </div>
            <div style={{clear: 'both'}}/>
        </>
    }
}

export default Onboarding
