43 lines
1.9 KiB
TypeScript
43 lines
1.9 KiB
TypeScript
import Link from "next/link";
|
|
import { curriculum } from "@/lib/curriculum";
|
|
import { Card } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
|
|
export default function LessonsOverview() {
|
|
return (
|
|
<div>
|
|
<h1 className="mb-2 text-3xl font-bold tracking-tight">All Topics</h1>
|
|
<p className="mb-10 text-muted">Form 1, Term 2 — Select a topic to explore</p>
|
|
|
|
{curriculum.map((unit) => (
|
|
<section key={unit.slug} className="mb-12">
|
|
<div className="mb-4 flex items-center gap-3">
|
|
<Badge variant={unit.color}>Unit {unit.number}</Badge>
|
|
<h2 className="text-xl font-semibold">{unit.title}</h2>
|
|
<span className="hidden text-sm text-muted sm:inline">{unit.weeks}</span>
|
|
</div>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{unit.topics.map((topic) => (
|
|
<Link key={topic.slug} href={`/lessons/${unit.slug}/${topic.slug}`}>
|
|
<Card accent={unit.color} hover className="group h-full">
|
|
<h3 className="mb-1 font-semibold">{topic.title}</h3>
|
|
<p className="mb-3 text-sm leading-relaxed text-muted">{topic.description}</p>
|
|
<div className="flex items-center justify-between text-xs text-muted">
|
|
<span>Week {topic.week}</span>
|
|
<span className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
|
|
Explore
|
|
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|