client/src/components/Prompts/AdvancedSwitch.tsx

import { useRecoilState, useSetRecoilState } from 'recoil';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
import store from '~/store';

const { PromptsEditorMode, promptsEditorMode, alwaysMakeProd } = store;

const AdvancedSwitch = () => {
  const localize = useLocalize();
  const [mode, setMode] = useRecoilState(promptsEditorMode);
  const setAlwaysMakeProd = useSetRecoilState(alwaysMakeProd);

  return (
    <div className="inline-flex h-10 items-center justify-center rounded-lg border border-border-light bg-surface-primary p-0.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50">
      <div className="flex flex-row items-stretch gap-0 whitespace-nowrap">
        <button
          type="button"
          className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors duration-200 ${
            mode === PromptsEditorMode.SIMPLE
              ? 'bg-surface-tertiary text-text-primary'
              : 'bg-transparent text-text-tertiary hover:text-text-secondary'
          }`}
          onClick={() => {
            setAlwaysMakeProd(true);
            setMode(PromptsEditorMode.SIMPLE);
          }}
        >
          {localize('com_ui_simple')}
        </button>
        <button
          type="button"
          className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors duration-200 ${
            mode === PromptsEditorMode.ADVANCED
              ? 'bg-surface-tertiary text-text-primary'
              : 'bg-transparent text-text-tertiary hover:text-text-secondary'
          }`}
          onClick={() => setMode(PromptsEditorMode.ADVANCED)}
        >
          {localize('com_ui_advanced')}
        </button>
      </div>
    </div>
  );
};

export default AdvancedSwitch;