NapCatQQ/napcat.webui/src/components/switch_card.tsx

import { Switch } from '@heroui/switch';
import clsx from 'clsx';
import React, { forwardRef } from 'react';

export interface SwitchCardProps {
  label?: string
  description?: string
  value?: boolean
  onValueChange?: (value: boolean) => void
  name?: string
  onBlur?: React.FocusEventHandler
  disabled?: boolean
  onChange?: React.ChangeEventHandler<HTMLInputElement>
}

const SwitchCard = forwardRef<HTMLInputElement, SwitchCardProps>(
  (props, ref) => {
    const { label, description, value, onValueChange, disabled } = props;
    const selectString = value ? 'true' : 'false';

    return (
      <Switch
        classNames={{
          base: clsx(
            'inline-flex flex-row-reverse w-full max-w-md bg-content1 hover:bg-content2 items-center',
            'justify-between cursor-pointer rounded-lg gap-2 p-3 border-2 border-transparent',
            'data-[selected=true]:border-primary bg-opacity-50 backdrop-blur-sm'
          ),
        }}
        {...props}
        ref={ref}
        isDisabled={disabled}
        isSelected={value}
        value={selectString}
        onValueChange={onValueChange}
      >
        <div className='flex flex-col gap-1'>
          <p className='text-medium'>{label}</p>
          <p className='text-tiny text-default-400'>{description}</p>
        </div>
      </Switch>
    );
  }
);

SwitchCard.displayName = 'SwitchCard';

export default SwitchCard;