Something went wrong. Try again.
A local-first note taking app
Something went wrong. Try again.
1.7 kB · 61 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162import type { EditorMode } from '../editors/types';import { EditIcon, ViewIcon } from '../icons';
type EditorModeToggleProps = { mode: EditorMode; onChange: (mode: EditorMode) => void; /** Disable interaction (e.g. when the active tab has no document). */ disabled?: boolean;};
const BASE_BUTTON = 'flex size-6 cursor-pointer items-center justify-center disabled:cursor-default';
/** * Conjoined two-button Edit / View segmented control. The selected button is * highlighted; both carry a tooltip + aria-label. Emits the *other* mode on * click of the unselected side. */export function EditorModeToggle({ mode, onChange, disabled,}: EditorModeToggleProps) { const buttonClass = (active: boolean) => `${BASE_BUTTON} ${ active ? 'bg-border/50 text-foreground' : 'text-foreground/60 hover:bg-border/40' }`;
return ( <div role="group" aria-label="Editor mode" className="border-border flex overflow-hidden rounded border" > <button type="button" title="Edit mode" aria-label="Edit mode" aria-pressed={mode === 'edit'} disabled={disabled} onClick={() => onChange('edit')} className={buttonClass(mode === 'edit')} > <EditIcon className="size-4" /> </button> <button type="button" title="View mode" aria-label="View mode" aria-pressed={mode === 'view'} disabled={disabled} onClick={() => onChange('view')} className={`border-border border-l ${buttonClass(mode === 'view')}`} > <ViewIcon className="size-4" /> </button> </div> );}