ershisan99/DevToysWeb
1
0
Fork 0
mirror of https://github.com/ershisan99/DevToysWeb.git synced 2025-12-17 04:59:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: group some utility classes

Browse Source
This commit is contained in:
rusconn
2023-06-24 19:11:57 +09:00
parent 8d658855ac
commit 3112e80544
8 changed files with 51 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/ui/switch.tsx
View File

@@ -12,14 +12,24 @@ export const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.
<SwitchPrimitives.Root
{...{ ref }}
className={cn(
"group inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-full border border-muted-foreground bg-switch hover:bg-switch-hover disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-switch data-[state=checked]:border-transparent data-[state=checked]:bg-indicator data-[state=checked]:hover:bg-indicator-hover data-[state=checked]:disabled:hover:bg-indicator",
"group inline-flex h-5 w-10 shrink-0 cursor-pointer items-center rounded-full border border-muted-foreground bg-switch",
"hover:bg-switch-hover",
"disabled:cursor-not-allowed disabled:opacity-50",
"hover:disabled:bg-switch",
"data-[state=checked]:border-transparent data-[state=checked]:bg-indicator",
"data-[state=checked]:hover:bg-indicator-hover",
"data-[state=checked]:disabled:hover:bg-indicator",
className
)}
{...props}
>
<SwitchPrimitives.Thumb
className={cn(
"pointer-events-none block h-3.5 w-3.5 rounded-full bg-foreground/80 shadow-lg transition-transform group-hover:h-4 group-hover:w-4 group-disabled:h-3.5 group-disabled:w-3.5 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-0.5 data-[state=checked]:bg-background"
"pointer-events-none block h-3.5 w-3.5 rounded-full bg-foreground/80 shadow-lg transition-transform",
"group-hover:h-4 group-hover:w-4",
"group-disabled:h-3.5 group-disabled:w-3.5",
"data-[state=checked]:translate-x-[22px] data-[state=checked]:bg-background",
"data-[state=unchecked]:translate-x-0.5"
)}
/>
</SwitchPrimitives.Root>