steps
1 year ago
App.jsx
1 year ago
Footer.jsx
1 year ago
Header.jsx
1 year ago
StepFooter.jsx
1 year ago
StepWrapper.jsx
1 year ago
onboarding.js
1 year ago
Header.jsx
44 lines
| 1 | /** |
| 2 | * External Dependencies |
| 3 | */ |
| 4 | import clx from 'classnames'; |
| 5 | |
| 6 | /** |
| 7 | * Internal Dependencies |
| 8 | */ |
| 9 | import { useWizard } from '@components/wizard'; |
| 10 | import { assetsUrl } from '@utilities'; |
| 11 | |
| 12 | export default function Header() { |
| 13 | const { stepCount, activeStep } = useWizard(); |
| 14 | const steps = Array.apply(null, { length: stepCount }); |
| 15 | |
| 16 | return ( |
| 17 | <div className="text-center"> |
| 18 | <img |
| 19 | className="w-8/12 m-auto" |
| 20 | src={assetsUrl('assets/img/advancedads-full-logo.svg')} |
| 21 | alt="" |
| 22 | /> |
| 23 | <div className="advads-wizard-progress"> |
| 24 | {steps.map((step, index) => { |
| 25 | const isActive = activeStep === index; |
| 26 | const stepClassName = clx( |
| 27 | 'advads-wizard-progress--item', |
| 28 | activeStep > index ? 'is-done' : '', |
| 29 | isActive ? 'is-active' : '' |
| 30 | ); |
| 31 | |
| 32 | return ( |
| 33 | <div className={stepClassName} key={`step-${index}`}> |
| 34 | <div className="advads-wizard-progress--count"> |
| 35 | {isActive ? `Step ${index + 1}` : index + 1} |
| 36 | </div> |
| 37 | </div> |
| 38 | ); |
| 39 | })} |
| 40 | </div> |
| 41 | </div> |
| 42 | ); |
| 43 | } |
| 44 |