TypeScript 98.3%
CSS 0.9%
Shell 0.7%
1"use client";2// Sous-navigation horizontale du cours (Progression / Concepts / Flashcards / …).3import Link from "next/link";4import { usePathname } from "next/navigation";5import { cn } from "@/components/ui";67const TABS = [8 { seg: "", label: "Progression" },9 { seg: "diapositives", label: "Diapositives" },10 { seg: "concepts", label: "Concepts" },11 { seg: "flashcards", label: "Flashcards" },12 { seg: "quiz", label: "Quiz" },13 { seg: "examens", label: "Examens" },14 { seg: "plan", label: "Plan" },15 { seg: "erreurs", label: "Erreurs" },16 { seg: "resumes", label: "Résumés" },17];1819export function CourseNav({ course, title, color }: { course: string; title: string; color: string }) {20 const pathname = usePathname();21 const base = `/apprendre/${course}`;22 return (23 <div className="sticky top-0 z-20 bg-card/85 backdrop-blur border-b border-app">24 <div className="px-4 sm:px-6 pt-3 flex items-center gap-2.5">25 <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ background: color }} aria-hidden />26 <h1 className="font-bold text-fg text-[15px]">{course.toUpperCase()}</h1>27 <span className="text-sm text-muted truncate hidden sm:inline">— {title}</span>28 </div>29 <nav className="px-2 sm:px-4 flex gap-1 overflow-x-auto pb-0 [-webkit-overflow-scrolling:touch]" aria-label="Sections du cours">30 {TABS.map((t) => {31 const href = t.seg ? `${base}/${t.seg}` : base;32 const active = t.seg ? pathname === href || pathname.startsWith(href + "/") : pathname === base;33 return (34 <Link35 key={t.seg}36 href={href}37 className={cn(38 "px-3 py-2.5 text-[13px] font-medium whitespace-nowrap border-b-2 -mb-px transition-colors",39 active40 ? "border-brand-500 text-brand-600 dark:text-brand-300"41 : "border-transparent text-muted hover:text-fg"42 )}43 >44 {t.label}45 </Link>46 );47 })}48 </nav>49 </div>50 );51}52