HotkeyToggle.tsx40 lines · main

1	import { Fragment } from 'react'
2	import { CardContent, KeyboardShortcut, Switch } from 'ui'
3
4	import { hotkeyToKeys } from '@/state/shortcuts/formatShortcut'
5	import type { ShortcutId } from '@/state/shortcuts/registry'
6	import { useShortcutPreferences } from '@/state/shortcuts/state'
7	import type { ShortcutDefinition } from '@/state/shortcuts/types'
8	import { useIsShortcutEnabled } from '@/state/shortcuts/useIsShortcutEnabled'
9
10	interface HotkeyToggleProps {
11	definition: ShortcutDefinition
12	isLast?: boolean
13	}
14
15	export function HotkeyToggle({ definition, isLast }: HotkeyToggleProps) {
16	const enabled = useIsShortcutEnabled(definition.id as ShortcutId)
17	const { setShortcutEnabled } = useShortcutPreferences()
18
19	return (
20	<CardContent className={isLast ? undefined : 'border-b'}>
21	<div className="flex items-center justify-between gap-x-3">
22	<label className="text-sm text-foreground">{definition.label}</label>
23	<div className="flex items-center gap-x-3">
24	<div className="flex items-center gap-1">
25	{definition.sequence.map((step, i) => (
26	<Fragment key={i}>
27	{i > 0 && <span className="text-foreground-lighter text-[11px]">then</span>}
28	<KeyboardShortcut keys={hotkeyToKeys(step)} />
29	</Fragment>
30	))}
31	</div>
32	<Switch
33	checked={enabled}
34	onCheckedChange={(checked) => setShortcutEnabled(definition.id as ShortcutId, checked)}
35	/>
36	</div>
37	</div>
38	</CardContent>
39	)
40	}