/
LanguageMenu.tsx
32 lines (30 loc) · 1.07 KB
/
LanguageMenu.tsx
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
import { LANGUAGES, useEditor, useValue } from '@tldraw/editor'
import { useUiEvents } from '../context/events'
import { TldrawUiMenuCheckboxItem } from './primitives/menus/TldrawUiMenuCheckboxItem'
import { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'
import { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'
/** @public */
export function LanguageMenu() {
const editor = useEditor()
const trackEvent = useUiEvents()
const currentLanguage = useValue('locale', () => editor.user.getLocale(), [editor])
return (
<TldrawUiMenuSubmenu id="help menu language" label="menu.language">
<TldrawUiMenuGroup id="languages">
{LANGUAGES.map(({ locale, label }) => (
<TldrawUiMenuCheckboxItem
id={`language-${locale}`}
key={locale}
title={locale}
label={label}
checked={locale === currentLanguage}
onSelect={() => {
editor.user.updateUserPreferences({ locale })
trackEvent('change-language', { source: 'menu', locale })
}}
/>
))}
</TldrawUiMenuGroup>
</TldrawUiMenuSubmenu>
)
}