Added Stepper component

apps/frontend/src/features/public-booking/public-booking-page.tsx

@@ -9,6 +9,15 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import {
+  Stepper,
+  StepperIndicator,
+  StepperItem,
+  StepperList,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+} from '@/components/ui/stepper';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { ApiClientError, apiClient } from '@/lib/api-client';
 import { useTheme } from '@/lib/theme';
@@ -265,49 +274,43 @@ function PlayzerBrand({ compact = false }: { compact?: boolean }) {
 }
 
 function ProgressSteps({ currentStep, mobile = false }: { currentStep: number; mobile?: boolean }) {
-  const labels = ['Elegi cancha', 'Selecciona horario', 'Tus datos', 'Confirmacion'];
+  const steps = [
+    { value: 'court', label: 'Elegi cancha' },
+    { value: 'time', label: 'Selecciona horario' },
+    { value: 'details', label: 'Tus datos' },
+    { value: 'confirm', label: 'Confirmacion' },
+  ];
+  const activeStep = steps[Math.max(0, Math.min(currentStep - 1, steps.length - 1))]?.value;
 
   return (
-    <div
-      className={
-        mobile
-          ? 'mx-auto grid w-full max-w-[230px] grid-cols-[1fr_1fr_1fr_1fr] items-center'
-          : 'flex items-center gap-5'
-      }
+    <Stepper
+      value={activeStep}
+      nonInteractive
+      className={mobile ? 'mx-auto w-full max-w-[240px]' : 'max-w-[760px]'}
     >
-      {labels.map((label, index) => {
-        const step = index + 1;
-        const isActive = step <= currentStep;
-
-        return (
-          <div key={label} className="flex min-w-0 items-center">
-            <div
-              className={`flex size-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold ${
-                isActive
-                  ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/25'
-                  : 'bg-white/10 text-white/65'
-              }`}
-            >
-              {step}
-            </div>
-            {!mobile && (
-              <span
-                className={`ml-3 text-xs ${isActive ? 'font-semibold text-white' : 'text-white/65'}`}
-              >
-                {label}
-              </span>
-            )}
-            {index < labels.length - 1 && (
-              <div
-                className={`mx-2 h-px flex-1 ${isActive ? 'bg-emerald-500/70' : 'bg-white/10'} ${
-                  mobile ? 'min-w-9' : 'w-8'
-                }`}
-              />
-            )}
-          </div>
-        );
-      })}
-    </div>
+      <StepperList className="items-center gap-0">
+        {steps.map((step, index) => (
+          <StepperItem
+            key={step.value}
+            value={step.value}
+            completed={index < currentStep - 1}
+            className="flex min-w-0 flex-1 items-center last:flex-none"
+          >
+            <StepperTrigger className="gap-2 rounded-full p-0 text-white/60 data-[state=active]:text-white data-[state=completed]:text-white">
+              <StepperIndicator className="size-7 border-0 bg-white/10 text-xs font-bold text-white/62 shadow-none data-[state=active]:bg-emerald-500 data-[state=active]:text-white data-[state=completed]:bg-emerald-500 data-[state=completed]:text-white">
+                {index + 1}
+              </StepperIndicator>
+              {!mobile && (
+                <StepperTitle className="whitespace-nowrap text-xs font-semibold text-inherit">
+                  {step.label}
+                </StepperTitle>
+              )}
+            </StepperTrigger>
+            <StepperSeparator className="mx-3 h-px min-w-6 flex-1 bg-white/10 data-[state=completed]:bg-emerald-500/80" />
+          </StepperItem>
+        ))}
+      </StepperList>
+    </Stepper>
   );
 }