Initial commit

resources/js/components/EvaluationStepsList.tsx

@@ -0,0 +1,40 @@
+import { type EvaluationRun, steps } from "@/hooks/useRoundEvaluationRun";
+
+type EvaluationStepsListProps = {
+  run: EvaluationRun | null;
+  isOfficialRun: boolean;
+  currentStepIndex: number;
+  isSucceeded: boolean;
+};
+
+export default function EvaluationStepsList({
+  run,
+  isOfficialRun,
+  currentStepIndex,
+  isSucceeded,
+}: EvaluationStepsListProps) {
+  if (!run || !isOfficialRun) return null;
+
+  return (
+    <div className="pt-2">
+      <div className="font-semibold mb-1">Prubeh</div>
+      <div className="space-y-1">
+        {steps.map((step, index) => {
+          const isCurrent = !isSucceeded && index === currentStepIndex;
+          const isDone = isSucceeded || (currentStepIndex > -1 && index < currentStepIndex);
+          const tone = isCurrent
+            ? "text-foreground"
+            : isDone
+              ? "text-foreground-600"
+              : "text-foreground-400";
+          return (
+            <div key={step.key} className={`flex items-center gap-2 ${tone}`}>
+              <span>{isDone ? "●" : isCurrent ? "○" : "·"}</span>
+              <span>{step.label}</span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}