global_funding-pc-merchant/src/pages/authentication/index.jsx

import React, { useState } from "react";
import { Divider, Card, Steps, Button, Radio, Form, Input, Row, Col, Select } from "antd";
import Page from "@/components/Page";
import FoundationInfo from "./components/FoundationInfo";
import DirectorInfo from "./components/DirectorInfo";
import { useTranslation } from 'react-i18next';
import "./style.less";

export default (props) => {
  const { t } = useTranslation();
  const [index, setIndex] = useState(0);
  return (
    <Page>
      <div className="authentication-box">
        <div className="authentication-left">
          <div style={{ fontSize: '24px', fontWeight: '400' }}>{t('authentication.titleLeft')}</div>
          <Card bordered={false}>
            <Steps
              style={{ height: '360px' }}
              progressDot
              current={index}
              direction="vertical"
              items={[
                {
                  title: t('authentication.stepsTitle1'),
                },
                {
                  title: t('authentication.stepsTitle2')
                },
                {
                  title: t('authentication.stepsTitle3')
                },
                {
                  title: t('authentication.stepsTitle4')
                },
                {
                  title: t('authentication.stepsTitle5')
                },
              ]}
            />
          </Card>
        </div>
        <div style={{ flex: 1.5 }}>
          {
            index === 0 && (
              <FoundationInfo index={index} setIndex={setIndex} />
            )
          },
          {
            index === 1 && (
              <DirectorInfo />
            )
          }
        </div>
      </div>
    </Page>
  )
}