feat: UI stepper component

web/src/components/ui/stepper.tsx

@@ -0,0 +1,93 @@
+import React, { useMemo } from "react";
+
+type Step = {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+};
+
+type StepperProps = {
+  steps: Step[];
+  currentStep: string;
+};
+
+export const Stepper: React.FC<StepperProps> = ({ steps, currentStep }) => {
+  const stepIndex = useMemo(
+    () => steps.findIndex((s) => s.id === currentStep),
+    [currentStep, steps],
+  );
+
+  const percent = useMemo(() => {
+    return steps.length === 1
+      ? 100
+      : Math.round((stepIndex / (steps.length - 1)) * 100);
+  }, [stepIndex, steps.length]);
+
+  return (
+    <div className="flex flex-col sm:flex-row sm:items-center w-full max-w-2xl mx-auto mb-5 sm:mb-8 gap-5 relative">
+      {steps.map((step, idx) => (
+        <>
+          <div
+            key={idx}
+            className={`sm:flex p-4 pb-0 sm:p-0 flex-1 items-center ${idx < stepIndex ? "opacity-70" : ""} ${idx === stepIndex ? "flex" : "hidden"}`}
+          >
+            {/* Step circle */}
+            <div
+              className={`relative z-10 flex items-center justify-center w-12 h-12 min-w-12 sm:w-10 sm:h-10 sm:min-w-10 rounded-full
+                        ${
+                          idx < stepIndex
+                            ? "bg-blue-400 text-white"
+                            : idx === stepIndex
+                              ? "bg-blue-600 text-white"
+                              : "bg-gray-100 dark:bg-gray-800/60 text-gray-500"
+                        }
+                      `}
+            >
+              {idx < stepIndex ? (
+                // Check icon for completed steps
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={3}
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+              ) : (
+                (step.icon ?? <span className="font-bold">{idx + 1}</span>)
+              )}
+            </div>
+
+            {/* Step label */}
+            <div className="flex flex-col ml-2 mr-2 sm:ml-4 sm:mr-4">
+              <span className="text-base text-gray-700 dark:text-gray-200 sm:text-sm font-medium">
+                {step.label}
+              </span>
+              {step.description && (
+                <span className="text-sm sm:text-xs text-gray-500 dark:text-gray-400">
+                  {step.description}
+                </span>
+              )}
+            </div>
+
+            {/* {idx < steps.length - 1 && (
+              <div className="flex-1 h-1 mx-2 min-w sm:mx-4 rounded bg-gray-300 dark:bg-gray-600" />
+            )} */}
+          </div>
+        </>
+      ))}
+      <div className="sm:hidden relative h-1 w-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
+        <div
+          className="absolute left-0 top-0 h-full bg-blue-500 transition-all ease-in duration-500"
+          style={{ width: `${percent}%` }}
+        />
+      </div>
+    </div>
+  );
+};