From 6c93b48fca58be680bba4dd9eb2f14e02b22d63b Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 17 Mar 2025 09:01:08 -0600
Subject: [PATCH] Add component for indicating steps in a wizard

---
 .../components/indicators/StepIndicator.tsx   | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 web/src/components/indicators/StepIndicator.tsx

diff --git a/web/src/components/indicators/StepIndicator.tsx b/web/src/components/indicators/StepIndicator.tsx
new file mode 100644
index 000000000..53634eeee
--- /dev/null
+++ b/web/src/components/indicators/StepIndicator.tsx
@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils";
+
+type StepIndicatorProps = {
+  steps: string[];
+  currentStep: number;
+};
+export default function StepIndicator({
+  steps,
+  currentStep,
+}: StepIndicatorProps) {
+  return (
+    <div className="flex flex-row justify-evenly">
+      {steps.map((name, idx) => (
+        <div className="flex flex-col items-center justify-center gap-2">
+          <div
+            className={cn(
+              "flex size-16 items-center justify-center rounded-full",
+              currentStep == idx ? "bg-selected" : "border-2 border-selected",
+            )}
+          >
+            {idx + 1}
+          </div>
+          {name}
+        </div>
+      ))}
+    </div>
+  );
+}