42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
import Link from "next/link";
|
|
import { curriculum } from "@/lib/curriculum";
|
|
import { Card } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Breadcrumbs } from "@/components/layout/breadcrumbs";
|
|
|
|
export default function Unit2Overview() {
|
|
const unit = curriculum[1];
|
|
|
|
return (
|
|
<div>
|
|
<Breadcrumbs
|
|
items={[
|
|
{ label: "Lessons", href: "/lessons" },
|
|
{ label: `Unit 2: ${unit.title}` },
|
|
]}
|
|
/>
|
|
<div className="mb-10">
|
|
<Badge variant="unit-2" className="mb-3">Unit 2 — {unit.weeks}</Badge>
|
|
<h1 className="mb-2 text-3xl font-bold tracking-tight">{unit.title}</h1>
|
|
<p className="text-muted leading-relaxed">{unit.description}</p>
|
|
</div>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{unit.topics.map((topic, i) => (
|
|
<Link key={topic.slug} href={`/lessons/${unit.slug}/${topic.slug}`}>
|
|
<Card accent="unit-2" hover className="group h-full">
|
|
<div className="mb-2 flex items-center gap-2">
|
|
<span className="flex h-7 w-7 items-center justify-center rounded-lg bg-unit-2-light text-xs font-bold text-unit-2-dark shadow-[var(--shadow-sm)]">
|
|
{i + 7}
|
|
</span>
|
|
<span className="text-xs text-muted">Week {topic.week}</span>
|
|
</div>
|
|
<h3 className="mb-1 font-semibold">{topic.title}</h3>
|
|
<p className="text-sm leading-relaxed text-muted">{topic.description}</p>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|