bilal/kolaytercih
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add pill variant to Tabs component and enhance ProgramTablosu with motion effects
All checks were successful
Deploy / deploy (push) Successful in 7m49s
Details

Browse Source 
Introduced a new "pill" variant for the Tabs component, allowing for a rounded, active tab style that aligns with the design of the "Giriş yap" button. Enhanced the ProgramTablosu component by integrating motion effects for active tab indicators, improving user experience with smooth transitions. Updated color handling for active states to ensure better visibility and consistency across the UI.
This commit is contained in:
bilalgursen
2026-08-09 03:39:10 +03:00
parent ce6871d623
commit f752d27101
2 changed files with 50 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ui/tabs.tsx
View File

@@ -31,6 +31,9 @@ const tabsListVariants = cva(
variant: {
default: "bg-muted",
line: "gap-1 bg-transparent",
// Nav'daki "Giriş yap" pili ile aynı dil: beyaz kapsül içinde koyu
// aktif hap (bkz. user-nav.tsx). Kayan gösterge tüketicide çizilir.
pill: "gap-1 rounded-full border border-slate-200 bg-white p-1 group-data-horizontal/tabs:h-auto",
},
},
defaultVariants: {
@@ -66,6 +69,9 @@ function TabsTrigger({
"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
// Pill varyantı: arka planı tüketicideki kayan gösterge verir, trigger
// şeffaf kalır; aktif metin koyu hap üstünde beyaza döner.
"group-data-[variant=pill]/tabs-list:h-auto group-data-[variant=pill]/tabs-list:rounded-full group-data-[variant=pill]/tabs-list:data-active:bg-transparent group-data-[variant=pill]/tabs-list:data-active:text-white",
"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
className
)}