import React, { useState } from
'react'
;
import
'rsuite/dist/rsuite.min.css'
;
import Steps from
'rsuite/Steps'
;
import { Button, IconButton, ButtonGroup,
ButtonToolbar } from
'rsuite'
;
import { Panel, PanelGroup } from
'rsuite'
;
import { Placeholder } from
'rsuite'
;
export
default
function
App() {
const [step, setStep] = React.useState(0)
const onChange = nextStep => {
setStep(nextStep < 0 ? 0 : nextStep > 3 ? 3 : nextStep);
};
const onNext = () => onChange(step + 1);
const onPrevious = () => onChange(step - 1);
return
(
<div>
<h1 style={{ color:
'green'
}}>
GeeksforGeeks
</h1>
<h3>React Suite Steps Dynamic </h3>
<Steps current={step}>
<Steps.Item title=
"Finished"
description=
"Description"
/>
<Steps.Item title=
"In Progress"
description=
"Description"
/>
<Steps.Item title=
"Waiting"
description=
"Description"
/>
<Steps.Item title=
"Waiting"
description=
"Description"
/>
</Steps>
<Panel header={`Step: ${step + 1}`}>
<Paragraph value={step} />
</Panel>
<hr />
<ButtonGroup>
<Button onClick={onPrevious}
disabled={step === 0}>
Previous
</Button>
<Button onClick={onNext}
disabled={step === 3}>
Next
</Button>
</ButtonGroup>
</div>
)
}
function
Paragraph(props) {
if
(props.value ==
'1'
) {
return
(<div style={{ color:
'red'
}}>
<h1>GeeksforGeeks</h1>
</div>)
}
else
{
if
(props.value ==
'2'
) {
return
(<div style={{ color:
'blue'
}}>
<h1>Hello Geeks!!!</h1>
</div>)
}
else
{
return
(<div style={{ color:
'orange'
}}>
<h1>Welcome to Steps Dynamic</h1>
</div>)
}
}
}