Initial commit

src/components/krow/CareerJourney.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+// A learning path rendered as a quiet vertical journey to the target role.
+export default function CareerJourney({ path, completedIds = [] }) {
+  const steps = path.steps || [];
+  const target = path.target_role || path.name;
+  const allDone = steps.length > 0 && steps.every((s) => completedIds.has(s.course_id));
+  const rungs = [
+    ...steps.map((s, i) => ({
+      label: s.course_title || `Step ${i + 1}`,
+      done: completedIds.has(s.course_id),
+    })),
+    { label: target, done: allDone, isTarget: true },
+  ];
+  const doneCount = steps.filter((s) => completedIds.has(s.course_id)).length;
+  const pct = steps.length ? Math.round((doneCount / steps.length) * 100) : 0;
+
+  return (
+    <div className="py-6">
+      <div className="flex items-baseline justify-between mb-5">
+        <h3 className="text-[17px] font-semibold text-[#0F172A]">{path.name}</h3>
+        <span className="text-[13px] text-[#64748B]">{pct}%</span>
+      </div>
+      {path.description && <p className="text-[13px] text-[#64748B] mb-4">{path.description}</p>}
+      <div className="relative pl-6">
+        <div className="absolute left-[7px] top-2 bottom-2 w-px bg-[#E2E8F0]" />
+        {rungs.map((r, i) => (
+          <div key={i} className="relative flex items-center gap-3 py-2">
+            <div
+              className={`absolute -left-6 w-3.5 h-3.5 rounded-full ${
+                r.done ? 'bg-[#0A39DF]' : 'bg-white border-2 border-[#E2E8F0]'
+              }`}
+            />
+            <span
+              className={`text-[15px] ${
+                r.isTarget
+                  ? 'font-semibold text-[#0A39DF]'
+                  : r.done
+                  ? 'text-[#0F172A] font-medium'
+                  : 'text-[#64748B]'
+              }`}
+            >
+              {r.label}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}