refactor(wizard): migrate to react [EE-2305] (#6957)

app/react/components/Stepper/Stepper.tsx

@@ -0,0 +1,33 @@
+import clsx from 'clsx';
+
+import styles from './Stepper.module.css';
+
+export interface Step {
+  title: string;
+}
+
+interface Props {
+  currentStep: number;
+  steps: Step[];
+}
+
+export function Stepper({ currentStep, steps }: Props) {
+  return (
+    <div className={styles.stepperWrapper}>
+      {steps.map((step, index) => (
+        <div
+          key={step.title}
+          className={clsx(styles.stepWrapper, {
+            [styles.active]: index + 1 === currentStep,
+            [styles.completed]: index + 1 < currentStep,
+          })}
+        >
+          <div className={styles.step}>
+            <div className={styles.stepCounter}>{index + 1}</div>
+            <div className={styles.stepName}>{step.title}</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}