about summary refs log tree commit diff
path: root/src/components/LanguageSelect.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/LanguageSelect.tsx')
-rw-r--r--src/components/LanguageSelect.tsx50
1 files changed, 50 insertions, 0 deletions
diff --git a/src/components/LanguageSelect.tsx b/src/components/LanguageSelect.tsx
new file mode 100644
index 000000000..2ad3949ae
--- /dev/null
+++ b/src/components/LanguageSelect.tsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {sanitizeAppLanguageSetting} from '#/locale/helpers'
+import {APP_LANGUAGES} from '#/locale/languages'
+import * as Select from '#/components/Select'
+
+export function LanguageSelect({
+  value,
+  onChange,
+  items = APP_LANGUAGES.map(l => ({
+    label: l.name,
+    value: l.code2,
+  })),
+}: {
+  value?: string
+  onChange: (value: string) => void
+  items?: {label: string; value: string}[]
+}) {
+  const {_} = useLingui()
+
+  const handleOnChange = React.useCallback(
+    (value: string) => {
+      if (!value) return
+      onChange(sanitizeAppLanguageSetting(value))
+    },
+    [onChange],
+  )
+
+  return (
+    <Select.Root
+      value={value ? sanitizeAppLanguageSetting(value) : undefined}
+      onValueChange={handleOnChange}>
+      <Select.Trigger label={_(msg`Select language`)}>
+        <Select.ValueText placeholder={_(msg`Select language`)} />
+        <Select.Icon />
+      </Select.Trigger>
+      <Select.Content
+        renderItem={({label, value}) => (
+          <Select.Item value={value} label={label}>
+            <Select.ItemIndicator />
+            <Select.ItemText>{label}</Select.ItemText>
+          </Select.Item>
+        )}
+        items={items}
+      />
+    </Select.Root>
+  )
+}