File size: 1,778 Bytes
aa2e6af | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | 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;
|