switch.tsx raw

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