visual-novel-web/src/components/ui/inputs/switch.tsx

'use client';

import { cn } from '@/lib';
import { useControllableValue } from 'ahooks';
import { InputLeft } from '.';
import { Switch as SwitchPrimitive } from 'radix-ui';

const { Root, Thumb } = SwitchPrimitive;
type SwitchProps = {
  value?: boolean;
  onChange?: (value: boolean) => void;
  icon?: any;
  text?: string;
} & React.HTMLAttributes<HTMLDivElement>;

export default function Switch(props: SwitchProps) {
  const {
    icon,
    text,
    onChange: onChangeProps,
    value: valueProps,
    ...rest
  } = props;
  const [value, onChange] = useControllableValue(props);

  return (
    <div {...rest} className={cn('input-view justify-between', rest.className)}>
      <InputLeft icon={icon} text={text} />
      <Root
        checked={value}
        onCheckedChange={onChange}
        className={cn(
          'relative inline-flex h-[28px] w-[52px] shrink-0 items-center',
          'cursor-pointer rounded-full',
          'transition-colors duration-200 ease-in-out',
          'focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:outline-none',
          'disabled:cursor-not-allowed disabled:opacity-50',
          // 未选中状态 - 灰色背景
          'bg-white/20',
          // 选中状态 - 绿色背景
          'data-[state=checked]:bg-[rgb(0,110,74)]' // 注意：RGB 值之间不能有空格
        )}
      >
        <Thumb
          className={cn(
            'pointer-events-none block h-[24px] w-[24px] rounded-full',
            'bg-white shadow-lg',
            'transition-transform duration-200 ease-in-out',
            // 未选中时在左侧（2px 偏移）
            'translate-x-[2px]',
            // 选中时移到右侧（52px - 24px - 2px = 26px）
            'data-[state=checked]:translate-x-[26px]'
          )}
        />
      </Root>
    </div>
  );
}