From ef3e9bccd36158decf8f4a91a08f65089155e2b5 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 10 Oct 2025 12:06:26 -0500
Subject: [PATCH] add dots variant to step indicator

---
 .../components/indicators/StepIndicator.tsx   | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/web/src/components/indicators/StepIndicator.tsx b/web/src/components/indicators/StepIndicator.tsx
index a6255fd0f..429e42280 100644
--- a/web/src/components/indicators/StepIndicator.tsx
+++ b/web/src/components/indicators/StepIndicator.tsx
@@ -4,15 +4,39 @@ import { useTranslation } from "react-i18next";
 type StepIndicatorProps = {
   steps: string[];
   currentStep: number;
-  translationNameSpace: string;
+  variant?: "default" | "dots";
+  translationNameSpace?: string;
 };
+
 export default function StepIndicator({
   steps,
   currentStep,
+  variant = "default",
   translationNameSpace,
 }: StepIndicatorProps) {
   const { t } = useTranslation(translationNameSpace);
 
+  if (variant == "dots") {
+    return (
+      <div className="flex flex-row justify-center gap-2">
+        {steps.map((_, idx) => (
+          <div
+            key={idx}
+            className={cn(
+              "size-2 rounded-full transition-colors",
+              currentStep === idx
+                ? "bg-selected"
+                : currentStep > idx
+                  ? "bg-muted-foreground"
+                  : "bg-muted",
+            )}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  // Default variant (original behavior)
   return (
     <div className="flex flex-row justify-evenly">
       {steps.map((name, idx) => (