flexor-web/src/components/pages/register/register.tsx

import React, { FC, useEffect } from 'react'

import CreateGroupStep from '../../create-group-step'
import CreateUserStep from '../../create-user-step'

interface Step {
    title: string
    component: FC
}

const steps: Step[] = [
    {
        title: 'Create a Community',
        component: () => <CreateGroupStep />,
    },
    {
        title: 'Create Your Account',
        component: () => <CreateUserStep />,
    },
]

export interface Props {
    step: number
    initForm: () => void
}

const Register: FC<Props> = ({ step: index, initForm }) => {
    const step = steps[index]
    const Component = step.component

    useEffect(() => {
        initForm()
    }, [])

    return (
        <div>
            <section className="hero is-dark is-bold">
                <div className="hero-body">
                    <div className="container">
                        <h1 className="title">{step.title}</h1>
                    </div>
                </div>
            </section>

            <div className="main-content">
                <Component />
            </div>
        </div>
    )
}

export default Register