Compass/web/components/switch-setting.tsx

import {Switch} from '@headlessui/react'
import clsx from 'clsx'
import {Tooltip} from 'web/components/widgets/tooltip'

import ShortToggle, {ToggleColorMode} from './widgets/short-toggle'

export const SwitchSetting = (props: {
  checked: boolean
  onChange: (checked: boolean) => void
  label: 'Web' | 'Email' | 'Mobile'
  disabled: boolean
  colorMode?: ToggleColorMode
}) => {
  const {colorMode, checked, onChange, label, disabled} = props
  return (
    <Switch.Group as="div" className="flex items-center gap-3">
      <Tooltip
        text={
          disabled && label !== 'Mobile'
            ? `You are opted out of all ${label} notifications. Go to the Opt Out section to undo this setting.`
            : disabled && label === 'Mobile'
              ? `You are opted out of all ${label} notifications. First download the app (Android available now, iOS soon!) and allow notifications. If you've already done so, go to the Opt Out section to undo this setting.`
              : ''
        }
      >
        <ShortToggle colorMode={colorMode} on={checked} setOn={onChange} disabled={disabled} />
      </Tooltip>
      <Switch.Label
        className={clsx(
          'text-ink-900 text-sm',
          disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
        )}
      >
        {label}
      </Switch.Label>
    </Switch.Group>
  )
}