47 lines
1.6 KiB
TypeScript
47 lines
1.6 KiB
TypeScript
interface Props {
|
|
mode: 'autocomplete' | 'clipboard';
|
|
onChange: (mode: 'autocomplete' | 'clipboard') => void;
|
|
}
|
|
|
|
export function OperatingMode({ mode, onChange }: Props) {
|
|
return (
|
|
<>
|
|
<div class="flex items-center gap-2 text-sm font-semibold text-text-primary my-2">
|
|
<i class="fa-solid fa-bolt text-primary"></i>
|
|
<span>Operating Mode</span>
|
|
</div>
|
|
<ul
|
|
id="mode"
|
|
class="list-none p-0 m-0 flex bg-input-bg rounded-xl border border-input-border overflow-hidden"
|
|
>
|
|
<li class="flex-1">
|
|
<button
|
|
value="autocomplete"
|
|
class={`w-full p-2.5 border-none font-sans text-sm font-semibold cursor-pointer transition-colors duration-300 ${
|
|
mode === 'autocomplete'
|
|
? 'bg-primary text-text-primary shadow-[0_2px_8px_rgba(99,102,241,0.4)]'
|
|
: 'bg-transparent text-text-secondary hover:bg-white/5 hover:text-text-primary'
|
|
}`}
|
|
onClick={() => onChange('autocomplete')}
|
|
>
|
|
autocomplete
|
|
</button>
|
|
</li>
|
|
<li class="flex-1">
|
|
<button
|
|
value="clipboard"
|
|
class={`w-full p-2.5 border-none font-sans text-sm font-semibold cursor-pointer transition-colors duration-300 ${
|
|
mode === 'clipboard'
|
|
? 'bg-primary text-text-primary shadow-[0_2px_8px_rgba(99,102,241,0.4)]'
|
|
: 'bg-transparent text-text-secondary hover:bg-white/5 hover:text-text-primary'
|
|
}`}
|
|
onClick={() => onChange('clipboard')}
|
|
>
|
|
clipboard
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</>
|
|
);
|
|
}
|