File size: 2,167 Bytes
f0743f4 | 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 48 49 50 51 52 53 54 55 56 57 58 59 60 | import { useRecoilState, useSetRecoilState } from 'recoil';
import { PromptsEditorMode } from '~/common';
import { useLocalize } from '~/hooks';
import store from '~/store';
const { promptsEditorMode, alwaysMakeProd } = store;
const AdvancedSwitch = () => {
const localize = useLocalize();
const [mode, setMode] = useRecoilState(promptsEditorMode);
const setAlwaysMakeProd = useSetRecoilState(alwaysMakeProd);
return (
<div className="relative flex h-10 items-center justify-center rounded-xl border border-border-light bg-surface-primary transition-all duration-300">
<div className="relative flex w-48 items-stretch md:w-64">
<div
className="absolute rounded-lg bg-surface-hover shadow-lg transition-all duration-300 ease-in-out"
style={{
top: '1px',
left: mode === PromptsEditorMode.SIMPLE ? '2px' : 'calc(50% + 2px)',
width: 'calc(50% - 4px)',
height: 'calc(100% - 2px)',
}}
/>
{/* Simple Mode Button */}
<button
type="button"
onClick={() => {
setAlwaysMakeProd(true);
setMode(PromptsEditorMode.SIMPLE);
}}
className={`relative z-10 flex-1 rounded-xl px-3 py-2 text-sm font-medium transition-all duration-300 md:px-6 ${
mode === PromptsEditorMode.SIMPLE
? 'text-text-primary'
: 'text-text-secondary hover:text-text-primary'
}`}
>
<span className="relative">{localize('com_ui_simple')}</span>
</button>
{/* Advanced Mode Button */}
<button
type="button"
onClick={() => setMode(PromptsEditorMode.ADVANCED)}
className={`relative z-10 flex-1 rounded-xl px-3 py-2 text-sm font-medium transition-all duration-300 md:px-6 ${
mode === PromptsEditorMode.ADVANCED
? 'text-text-primary'
: 'text-text-secondary hover:text-text-primary'
}`}
>
<span className="relative">{localize('com_ui_advanced')}</span>
</button>
</div>
</div>
);
};
export default AdvancedSwitch;
|