File tree Expand file tree Collapse file tree 2 files changed +64
-0
lines changed
frontend/src/components/ui Expand file tree Collapse file tree 2 files changed +64
-0
lines changed Original file line number Diff line number Diff line change
1
+ "use client"
2
+
3
+ import * as React from "react"
4
+ import * as LabelPrimitive from "@radix-ui/react-label"
5
+ import { cva , type VariantProps } from "class-variance-authority"
6
+
7
+ import { cn } from "@/lib/utils"
8
+
9
+ const labelVariants = cva (
10
+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11
+ )
12
+
13
+ const Label = React . forwardRef <
14
+ React . ElementRef < typeof LabelPrimitive . Root > ,
15
+ React . ComponentPropsWithoutRef < typeof LabelPrimitive . Root > &
16
+ VariantProps < typeof labelVariants >
17
+ > ( ( { className, ...props } , ref ) => (
18
+ < LabelPrimitive . Root
19
+ ref = { ref }
20
+ className = { cn ( labelVariants ( ) , className ) }
21
+ { ...props }
22
+ />
23
+ ) )
24
+ Label . displayName = LabelPrimitive . Root . displayName
25
+
26
+ export { Label }
Original file line number Diff line number Diff line change
1
+ "use client"
2
+
3
+ import * as React from "react"
4
+ import * as SwitchPrimitives from "@radix-ui/react-switch"
5
+ import { cva , type VariantProps } from "class-variance-authority" // cva might not be strictly necessary here but often included
6
+
7
+ import { cn } from "@/lib/utils"
8
+
9
+ // Base styling for the switch, derived from typical ShadCN setups.
10
+ // It uses data-state attributes for checked/unchecked states.
11
+ const switchRootVariants = cva (
12
+ "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input" ,
13
+ {
14
+ variants : { } , // No specific variants defined here, but structure allows for it
15
+ defaultVariants : { } ,
16
+ }
17
+ )
18
+
19
+ const switchThumbVariants = cva ( // Also define thumb variants if you want to customize it via cva
20
+ "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
21
+ )
22
+
23
+
24
+ const Switch = React . forwardRef <
25
+ React . ElementRef < typeof SwitchPrimitives . Root > ,
26
+ React . ComponentPropsWithoutRef < typeof SwitchPrimitives . Root > & VariantProps < typeof switchRootVariants >
27
+ > ( ( { className, ...props } , ref ) => (
28
+ < SwitchPrimitives . Root
29
+ className = { cn ( switchRootVariants ( ) , className ) }
30
+ { ...props }
31
+ ref = { ref }
32
+ >
33
+ < SwitchPrimitives . Thumb className = { cn ( switchThumbVariants ( ) ) } />
34
+ </ SwitchPrimitives . Root >
35
+ ) )
36
+ Switch . displayName = SwitchPrimitives . Root . displayName
37
+
38
+ export { Switch }
You can’t perform that action at this time.
0 commit comments