41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { STUDY_MODES } from "@/config/studyModes";
|
|
|
|
interface ClassTabsProps {
|
|
classSlug: string;
|
|
}
|
|
|
|
export function ClassTabs({ classSlug }: ClassTabsProps) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<div className="mb-8 border-b border-border-light">
|
|
<nav className="flex gap-2" aria-label="Study modes">
|
|
{STUDY_MODES.map((mode) => {
|
|
const href = `/${classSlug}/${mode.path}`;
|
|
const isActive = pathname === href || pathname.startsWith(href + "/");
|
|
|
|
return (
|
|
<Link
|
|
key={mode.key}
|
|
href={href}
|
|
className={`relative min-h-12 px-4 py-3 text-sm font-bold transition-colors duration-200 ${
|
|
isActive
|
|
? "text-primary"
|
|
: "text-text-muted hover:text-text-heading"
|
|
}`}
|
|
>
|
|
{mode.label}
|
|
{isActive && (
|
|
<span className="absolute bottom-0 left-2 right-2 h-[3px] rounded-t-full bg-primary" />
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|