progress component setup

src/routes/Publish/Progress.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+const Progress = ({
+    currentStep,
+    totalSteps,
+    steps
+}: {
+    currentStep: number
+    totalSteps: number
+    steps: any[]
+}) => {
+    return (
+        <aside>
+            <ul>
+                {steps.map(({ title }, index) => (
+                    <li key={index}>
+                        {index + 1}
+                        {title}
+                    </li>
+                ))}
+            </ul>
+        </aside>
+    )
+}
+
+export default Progress

src/routes/Publish/index.tsx

@@ -5,6 +5,7 @@ import Form from '../../components/atoms/Form/Form'
 import AssetModel from '../../models/AssetModel'
 import Web3message from '../../components/Web3message'
 import Step from './Step'
+import Progress from './Progress'
 
 import form from '../../data/form-publish.json'
 
@@ -169,7 +170,11 @@ class Publish extends Component<{}, PublishState> {
                     this.publishedState()
                 ) : (
                     <>
-                        <p>Step {this.state.currentStep} </p>
+                        <Progress
+                            steps={form.steps}
+                            currentStep={this.state.currentStep}
+                            totalSteps={form.steps.length}
+                        />
 
                         <Form onSubmit={this.registerAsset}>
                             {form.steps.map((step: any, index: number) => (