first commit

src/components/Stepper/Stepper.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import activeStepper from "../../assets/images/active-stepper.png";
+
+interface Step {
+  key: string | number;
+  label: string;
+  disabled?: boolean;
+}
+
+interface StepperProps {
+  steps: Step[];
+  activeStep: string | number;
+}
+
+export const Stepper: React.FC<StepperProps> = ({ steps, activeStep }) => {
+  return (
+    <div className="w-full px-4 overflow-x-auto overflow-y-hidden select-none">
+      <div className="relative min-w-[300px]">
+        <div className="absolute left-0 right-0 top-1/2 h-[0.5px] bg-primary-800">
+          <div className="h-1 transition-all duration-300"></div>
+        </div>
+
+        <div className="relative flex justify-between sm:justify-center sm:gap-20 md:gap-25 lg:gap-30">
+          {steps.map((step) => {
+            const isActive = step.key === activeStep;
+
+            return (
+              <div
+                key={step.key}
+                className={`flex flex-col items-center px-2 sm:px-0`}
+              >
+                <div
+                  className={`relative z-10 flex h-6 w-6 sm:h-7 sm:w-7 items-center justify-center  mt-[25px] bg-white dark:bg-gray-900 rounded-full ${
+                    step?.disabled ? "border-gray-200" : "border-gray-300"
+                  } ${!isActive && "border-1  dark:border-white2-600"}`}
+                >
+                  {isActive ? (
+                    <img
+                      src={activeStepper}
+                      alt="Active step"
+                      className="h-full"
+                    />
+                  ) : (
+                    <span
+                      className={`text-sm font-medium  dark:text-white p-2 sm:p-3 `}
+                    ></span>
+                  )}
+                </div>
+
+                <div
+                  className={`mt-2 text-center text-xs sm:text-sm font-medium whitespace-nowrap ${
+                    step?.disabled
+                      ? "text-gray-300 dark:text-gray-100 "
+                      : "text-white1-900 dark:text-gray2-300 "
+                  }`}
+                >
+                  {step.label}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};