Initial working commit

src/components/ui/ClassTabs.tsx

@@ -0,0 +1,41 @@
+"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="border-b border-border-light mb-6">
+      <nav className="flex gap-0" 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 px-5 py-3 text-sm font-medium transition-colors duration-200 ${
+                isActive
+                  ? "text-primary"
+                  : "text-text-muted hover:text-text-heading"
+              }`}
+            >
+              {mode.label}
+              {isActive && (
+                <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-t-full" />
+              )}
+            </Link>
+          );
+        })}
+      </nav>
+    </div>
+  );
+}