feat: update step icon if done

frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/Stepper/Stepper.tsx

@@ -2,6 +2,7 @@ import { Fragment } from "react";
 
 import { cn } from "@/lib/utils";
 
+import { Step } from "./components/Step";
 import { useBrainCreationSteps } from "../../hooks/useBrainCreationSteps";
 
 export const Stepper = (): JSX.Element => {
@@ -11,24 +12,7 @@ export const Stepper = (): JSX.Element => {
     <div className="flex flex-row justify-between w-full px-12 mb-12">
       {steps.map((step, index) => (
         <Fragment key={step.value}>
-          <div
-            key={step.label}
-            className="flex flex-row justify-center items-center flex-1"
-          >
-            <div className="flex flex-col justify-center items-center">
-              <div
-                className={cn(
-                  "h-[40px] w-[40px] border-solid rounded-full flex flex-row items-center justify-center mb-2 border-primary border-2",
-                  step.value === currentStep ? "bg-primary text-white" : ""
-                )}
-              >
-                {index + 1}
-              </div>
-              <span key={step.label} className="text-xs text-center">
-                {step.label}
-              </span>
-            </div>
-          </div>
+          <Step index={index} step={step} />
           {index < steps.length - 1 && ( // Add horizontal line for all but the last step
             <hr
               className={cn(

frontend/lib/components/AddBrainModal/components/AddBrainSteps/components/Stepper/components/Step.tsx

@@ -0,0 +1,39 @@
+import { FaCheckCircle } from "react-icons/fa";
+
+import { cn } from "@/lib/utils";
+
+import { useBrainCreationSteps } from "../../../hooks/useBrainCreationSteps";
+import { Step as StepType } from "../../../types";
+
+type StepProps = {
+  index: number;
+  step: StepType;
+};
+
+export const Step = ({ index, step }: StepProps): JSX.Element => {
+  const { currentStep, currentStepIndex } = useBrainCreationSteps();
+  const isStepDone = index < currentStepIndex;
+  const stepContent = isStepDone ? <FaCheckCircle /> : index + 1;
+
+  return (
+    <div
+      key={step.label}
+      className="flex flex-row justify-center items-center flex-1"
+    >
+      <div className="flex flex-col justify-center items-center">
+        <div
+          className={cn(
+            "h-[40px] w-[40px] border-solid rounded-full flex flex-row items-center justify-center mb-2 border-primary border-2 text-primary",
+            isStepDone ? "bg-primary text-white" : "",
+            step.value === currentStep ? "bg-primary text-white" : ""
+          )}
+        >
+          {stepContent}
+        </div>
+        <span key={step.label} className="text-xs text-center">
+          {step.label}
+        </span>
+      </div>
+    </div>
+  );
+};

frontend/lib/components/AddBrainModal/components/AddBrainSteps/hooks/useBrainCreationSteps.ts

@@ -3,13 +3,13 @@ import { useTranslation } from "react-i18next";
 
 import { CreateBrainProps } from "@/lib/components/AddBrainModal/types";
 
-import { StepperStep } from "../types";
+import { Step } from "../types";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useBrainCreationSteps = () => {
   const { t } = useTranslation("brain");
 
-  const steps: StepperStep[] = [
+  const steps: Step[] = [
     {
       label: t("brain_type"),
       value: "BRAIN_TYPE",
@@ -25,11 +25,11 @@ export const useBrainCreationSteps = () => {
   ];
   const { watch, setValue } = useFormContext<CreateBrainProps>();
   const currentStep = watch("brainCreationStep");
+  const currentStepIndex = steps.findIndex(
+    (step) => step.value === currentStep
+  );
 
   const goToNextStep = () => {
-    const currentStepIndex = steps.findIndex(
-      (step) => step.value === currentStep
-    );
     if (currentStepIndex === -1 || currentStepIndex === steps.length - 1) {
       return;
     }
@@ -39,9 +39,6 @@ export const useBrainCreationSteps = () => {
   };
 
   const goToPreviousStep = () => {
-    const currentStepIndex = steps.findIndex(
-      (step) => step.value === currentStep
-    );
     if (currentStepIndex === -1 || currentStepIndex === 0) {
       return;
     }
@@ -55,5 +52,6 @@ export const useBrainCreationSteps = () => {
     steps,
     goToNextStep,
     goToPreviousStep,
+    currentStepIndex,
   };
 };

frontend/lib/components/AddBrainModal/components/AddBrainSteps/types.ts

@@ -1,6 +1,6 @@
 import { BrainCreationStep } from "../../types";
 
-export type StepperStep = {
+export type Step = {
   label: string;
   value: BrainCreationStep;
 };