Glass Switch

1'use client'
2 
3import * as React from 'react'
4import { Switch as SwitchPrimitive } from 'radix-ui'
5 
6import { cn } from '@/lib/utils'
7 
8const GlassSwitch = React.forwardRef<
9  React.ComponentRef<typeof SwitchPrimitive.Root>,
10  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
11>(({ className, ...props }, ref) => (
12  <SwitchPrimitive.Root
13    className={cn(
14      'peer inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-input 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-ruri dark:data-[state=checked]:bg-ruri-soft',
15      className,
16    )}
17    {...props}
18    ref={ref}
19  >
20    <SwitchPrimitive.Thumb
21      className={cn(
22        'pointer-events-none block size-5 rounded-full bg-background shadow ring-0 dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-deep transition-transform data-[state=checked]:translate-x-[17px] data-[state=unchecked]:translate-x-px',
23      )}
24    />
25  </SwitchPrimitive.Root>
26))
27GlassSwitch.displayName = SwitchPrimitive.Root.displayName
28 
29export { GlassSwitch }