31 lines
1.6 KiB
JavaScript
31 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { BookOpen } from 'lucide-react';
|
|
|
|
export default function LearnToday({ courses = [] }) {
|
|
const recs = courses.filter((c) => c.status !== 'archived').slice(0, 4);
|
|
return (
|
|
<section className="rounded-2xl bg-white border border-[#E5E7EB] p-6 sm:p-8">
|
|
<h2 className="text-[18px] font-bold text-[#0F172A]">Learn</h2>
|
|
<p className="text-[13px] text-[#6B7280] mb-5">Micro-learning. 5-minute lessons. Learning increases value immediately.</p>
|
|
{recs.length === 0 ? (
|
|
<p className="text-[13px] text-[#6B7280]">No recommendations yet.</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{recs.map((c) => (
|
|
<Link key={c.id} to={`/university/${c.id}`} className="flex items-center justify-between gap-3 p-3 rounded-xl hover:bg-[#F9FAFB] border border-transparent hover:border-[#E5E7EB] transition-colors">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-9 h-9 rounded-lg bg-[#EFF6FF] text-[#0A39DF] flex items-center justify-center"><BookOpen className="w-4 h-4" /></div>
|
|
<div>
|
|
<div className="text-[14px] font-medium text-[#0F172A]">{c.title}</div>
|
|
<div className="text-[11px] text-[#6B7280]">{c.estimated_minutes} min · {c.category}</div>
|
|
</div>
|
|
</div>
|
|
<span className="text-[12px] font-bold text-[#0A39DF] whitespace-nowrap">+{Math.max(1, Math.round((c.xp || 100) / 20))} Score</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
} |