28 lines
1.7 KiB
JavaScript
28 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { ArrowRight, Route } from 'lucide-react';
|
|
|
|
export default function LearningPathCard({ path, completedIds = [] }) {
|
|
const steps = path.steps || [];
|
|
const done = steps.filter(s => completedIds.has(s.course_id)).length;
|
|
const pct = steps.length ? Math.round((done / steps.length) * 100) : 0;
|
|
return (
|
|
<Link to="/university" className="block bg-white border border-[#E5E7EB] rounded-xl p-5 hover:border-[#0A39DF] hover:shadow-sm transition-all">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<div className="w-8 h-8 rounded-lg bg-[#0A39DF] flex items-center justify-center shrink-0"><Route className="w-4 h-4 text-white" /></div>
|
|
<h3 className="font-semibold text-[#111827] text-[15px]">{path.name}</h3>
|
|
</div>
|
|
<p className="text-[12px] text-[#6B7280] mb-3">{path.description || `Career track to ${path.target_role || path.name}`}</p>
|
|
<div className="flex flex-wrap items-center gap-1.5 mb-3">
|
|
{steps.flatMap((s, i) => [
|
|
<span key={`s${i}`} className={`text-[11px] px-2 py-0.5 rounded-full ${completedIds.has(s.course_id) ? 'bg-[#F0FDF4] text-[#166534]' : 'bg-[#F3F4F6] text-[#6B7280]'}`}>{s.course_title || `Step ${i + 1}`}</span>,
|
|
i < steps.length - 1 ? <ArrowRight key={`a${i}`} className="w-3 h-3 text-[#D1D5DB]" /> : null,
|
|
])}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex-1 h-2 rounded-full bg-[#F3F4F6] overflow-hidden"><div className="h-full bg-[#0A39DF]" style={{ width: `${pct}%` }} /></div>
|
|
<span className="text-[11px] font-medium text-[#6B7280]">{done}/{steps.length}</span>
|
|
</div>
|
|
</Link>
|
|
);
|
|
} |