Elijah/Study
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

New: Ui Redesign

Browse source
This commit is contained in:
Elijah 2026-07-11 13:48:02 -07:00
parent 009d1eb065
commit 631dfa5923
22 changed files with 464 additions and 524 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/ui/ClassTabs.tsx
View file

@ -12,8 +12,8 @@ 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">
<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 + "/");
@ -22,7 +22,7 @@ export function ClassTabs({ classSlug }: ClassTabsProps) {
<Link
key={mode.key}
href={href}
className={`relative px-5 py-3 text-sm font-medium transition-colors duration-200 ${
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"
@ -30,7 +30,7 @@ export function ClassTabs({ classSlug }: ClassTabsProps) {
>
{mode.label}
{isActive && (
<span className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary rounded-t-full" />
<span className="absolute bottom-0 left-2 right-2 h-[3px] rounded-t-full bg-primary" />
)}
</Link>
);