DHBW-WE/MeetUp
5
0
Fork 0
Code Issues 7 Pull requests 5 Projects 1 Releases 5 Packages 1 Wiki Activity Actions

refactor(ui): enhance component className structure for better readability and maintainability

Browse source
This commit is contained in:
Maximilian Liebmann 2025-05-30 19:45:49 +02:00
parent 9cb378f197
commit 573c3053b6
9 changed files with 553 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/components/ui/tabs.tsx
View file

@ -26,8 +26,34 @@ function TabsList({
<TabsPrimitive.List
data-slot='tabs-list'
className={cn(
'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
className,
' ',
/* Text */
'text-muted-foreground',
/* Background */
'bg-muted',
/* Border */
'rounded-lg',
/* Font */
'',
/* Cursor */
'',
/* Ring */
'',
/* Outline */
'',
/* Shadow */
'',
/* Opacity */
'',
/* Scaling */
'h-9 w-fit',
/* Spacing */
'p-[3px]',
/* Alignment */
'inline-flex items-center justify-center',
/* Miscellaneous */
'',
/* ////////// */ className,
)}
{...props}
/>
@ -42,7 +68,35 @@ function TabsTrigger({
<TabsPrimitive.Trigger
data-slot='tabs-trigger'
className={cn(
"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
/* Text */
'text-sm dark:data-[state=active]:text-foreground text-foreground dark:text-muted-foreground',
/* Background */
'data-[state=active]:bg-background dark:data-[state=active]:bg-input/30',
/* Border */
'border rounded-md focus-visible:border-ring dark:data-[state=active]:border-input',
'border-transparent',
/* Font */
'font-medium',
/* Cursor */
'disabled:pointer-events-none [&_svg]:pointer-events-none',
/* Ring */
'focus-visible:ring-ring/50 focus-visible:ring-[3px]',
/* Outline */
'focus-visible:outline-ring focus-visible:outline-1',
/* Shadow */
'data-[state=active]:shadow-sm',
/* Opacity */
'disabled:opacity-50',
/* Scaling */
"h-[calc(100%-1px)] [&_svg:not([class*='size-'])]:size-4",
/* Spacing */
'gap-1.5 px-2 py-1 [&_svg]:shrink-0',
/* Alignment */
'inline-flex flex-1 items-center justify-center whitespace-nowrap',
'transition-[color,box-shadow]',
/* Miscellaneous */
'',
/* ////////// */
className,
)}
{...props}