Release 202412292127

ui/src/components/StepCounter.tsx

@@ -0,0 +1,73 @@
+import { CheckIcon } from "@heroicons/react/16/solid";
+import { cva, cx } from "@/cva.config";
+import Card from "@/components/Card";
+
+type Props = {
+  nSteps: number;
+  currStepIdx: number;
+  size?: keyof typeof sizes;
+};
+
+const sizes = {
+  SM: "text-xs leading-[12px]",
+  MD: "text-sm leading-[14px]",
+};
+
+const variants = cva({
+  variants: {
+    size: sizes,
+  },
+});
+
+export default function StepCounter({ nSteps, currStepIdx, size = "MD" }: Props) {
+  const textStyle = variants({ size });
+  return (
+    <Card className="!inline-flex w-auto select-none items-center justify-center gap-x-2 rounded-lg p-1">
+      {[...Array(nSteps).keys()].map(i => {
+        if (i < currStepIdx) {
+          return (
+            <div
+              className={cx(
+                "flex items-center justify-center rounded-full border border-blue-800 bg-blue-700 text-slate-600 dark:border-blue-300",
+                textStyle,
+                size === "SM" ? "h-5 w-5" : "h-6 w-6",
+              )}
+              key={`${i}-${currStepIdx}`}
+            >
+              <CheckIcon className="h-3.5 w-3.5 text-white" />
+            </div>
+          );
+        }
+
+        if (i === currStepIdx) {
+          return (
+            <div
+              className={cx(
+                "rounded-md border border-blue-800 bg-blue-700 px-2 py-1 font-medium text-white shadow-sm dark:border-blue-300",
+                textStyle,
+              )}
+              key={`${i}-${currStepIdx}`}
+            >
+              Step {i + 1}
+            </div>
+          );
+        }
+        if (i > currStepIdx) {
+          return (
+            <Card
+              className={cx(
+                "flex items-center justify-center !rounded-full text-slate-600 dark:text-slate-400",
+                textStyle,
+                size === "SM" ? "h-5 w-5" : "h-6 w-6",
+              )}
+              key={`${i}-${currStepIdx}`}
+            >
+              {i + 1}
+            </Card>
+          );
+        }
+        return null;
+      })}
+    </Card>
+  );
+}