|
1 | | -import { useAppTranslation } from "../i18n/hooks"; |
2 | | -import { Select, SelectValue, SelectContent, SelectItem } from "./ui/select"; |
3 | | -import { buttonVariants } from "./ui/button"; |
4 | | -import type { ButtonProps } from "@base-ui/react"; |
5 | | -import { Select as RootSelect } from "@base-ui/react/select"; |
6 | | -import { cn } from "@/lib/utils"; |
| 1 | +import { useAppTranslation } from '../i18n/hooks' |
| 2 | +import { Select, SelectValue, SelectContent, SelectItem } from './ui/select' |
| 3 | +import { buttonVariants } from './ui/button' |
| 4 | +import type { ButtonProps } from '@base-ui/react' |
| 5 | +import { Select as RootSelect } from '@base-ui/react/select' |
| 6 | +import { cn } from '@/lib/utils' |
7 | 7 |
|
8 | 8 | const LANGUAGES = [ |
9 | | - { value: "en", label: "English" }, |
10 | | - { value: "ru", label: "Русский" }, |
11 | | - { value: "sr", label: "Српски" }, |
12 | | - { value: "fr", label: "Français" }, |
13 | | - { value: "zh-CN", label: "简体中文" }, |
14 | | - { value: "zh-TW", label: "繁體中文" }, |
15 | | - { value: "de", label: "Deutsch" }, |
16 | | - { value: "ja", label: "日本語" }, |
17 | | - { value: "th", label: "Thai" }, |
18 | | - { value: "it", label: "Italiano" }, |
19 | | - { value: "cs", label: "Čeština" }, |
20 | | - { value: "es", label: "Español" }, |
21 | | - { value: "pt-BR", label: "Português" }, |
22 | | - { value: "ar", label: "العربية" }, |
23 | | - { value: "fa", label: "فارسی" }, |
24 | | - { value: "ko", label: "한국어" }, |
25 | | - { value: "hi", label: "हिन्दी" }, |
26 | | - { value: "pl", label: "Polski" }, |
27 | | - { value: "uk", label: "Українська" }, |
28 | | - { value: "tr", label: "Türkçe" }, |
29 | | - { value: "no", label: "Norsk" }, |
30 | | - { value: "bn", label: "বাংলা" }, |
31 | | -]; |
| 9 | + { value: 'en', label: 'English' }, |
| 10 | + { value: 'ru', label: 'Русский' }, |
| 11 | + { value: 'sr', label: 'Српски' }, |
| 12 | + { value: 'fr', label: 'Français' }, |
| 13 | + { value: 'zh-CN', label: '简体中文' }, |
| 14 | + { value: 'zh-TW', label: '繁體中文' }, |
| 15 | + { value: 'de', label: 'Deutsch' }, |
| 16 | + { value: 'ja', label: '日本語' }, |
| 17 | + { value: 'th', label: 'Thai' }, |
| 18 | + { value: 'it', label: 'Italiano' }, |
| 19 | + { value: 'cs', label: 'Čeština' }, |
| 20 | + { value: 'es', label: 'Español' }, |
| 21 | + { value: 'pt-BR', label: 'Português' }, |
| 22 | + { value: 'ar', label: 'العربية' }, |
| 23 | + { value: 'fa', label: 'فارسی' }, |
| 24 | + { value: 'ko', label: '한국어' }, |
| 25 | + { value: 'hi', label: 'हिन्दी' }, |
| 26 | + { value: 'pl', label: 'Polski' }, |
| 27 | + { value: 'uk', label: 'Українська' }, |
| 28 | + { value: 'tr', label: 'Türkçe' }, |
| 29 | + { value: 'no', label: 'Norsk' }, |
| 30 | + { value: 'bn', label: 'বাংলা' }, |
| 31 | +] |
32 | 32 |
|
33 | 33 | export function LanguageSwitcher(props: ButtonProps) { |
34 | | - const { i18n } = useAppTranslation(); |
| 34 | + const { i18n } = useAppTranslation() |
35 | 35 |
|
36 | | - const currentLanguage = |
37 | | - LANGUAGES.find((lang) => lang.value === i18n.language) || LANGUAGES[0]; |
| 36 | + const currentLanguage = |
| 37 | + LANGUAGES.find((lang) => lang.value === i18n.language) || LANGUAGES[0] |
38 | 38 |
|
39 | | - const changeLanguage = (lng: string) => { |
40 | | - i18n.changeLanguage(lng); |
41 | | - window.dispatchEvent(new Event("languagechange")); |
42 | | - }; |
| 39 | + const changeLanguage = (lng: string) => { |
| 40 | + i18n.changeLanguage(lng) |
| 41 | + window.dispatchEvent(new Event('languagechange')) |
| 42 | + } |
43 | 43 |
|
44 | | - return ( |
45 | | - <Select |
46 | | - // items={LANGUAGES} |
47 | | - value={currentLanguage} |
48 | | - onValueChange={(item) => { |
49 | | - return item && changeLanguage(item?.value); |
50 | | - }} |
51 | | - > |
52 | | - <RootSelect.Trigger |
53 | | - {...props} |
54 | | - className={cn( |
55 | | - buttonVariants({ variant: "ghost", size: "sm" }), |
56 | | - props.className |
57 | | - )} |
58 | | - > |
59 | | - <SelectValue /> |
60 | | - </RootSelect.Trigger> |
61 | | - <SelectContent> |
62 | | - {LANGUAGES.map((lang) => ( |
63 | | - <SelectItem value={lang} key={lang.value}> |
64 | | - {lang.label} |
65 | | - </SelectItem> |
66 | | - ))} |
67 | | - </SelectContent> |
68 | | - </Select> |
69 | | - ); |
| 44 | + return ( |
| 45 | + <Select |
| 46 | + // items={LANGUAGES} |
| 47 | + value={currentLanguage} |
| 48 | + onValueChange={(item) => { |
| 49 | + return item && changeLanguage(item?.value) |
| 50 | + }} |
| 51 | + > |
| 52 | + <RootSelect.Trigger |
| 53 | + {...props} |
| 54 | + className={cn( |
| 55 | + buttonVariants({ variant: 'ghost', size: 'sm' }), |
| 56 | + props.className |
| 57 | + )} |
| 58 | + > |
| 59 | + <SelectValue /> |
| 60 | + </RootSelect.Trigger> |
| 61 | + <SelectContent> |
| 62 | + {LANGUAGES.map((lang) => ( |
| 63 | + <SelectItem value={lang} key={lang.value}> |
| 64 | + {lang.label} |
| 65 | + </SelectItem> |
| 66 | + ))} |
| 67 | + </SelectContent> |
| 68 | + </Select> |
| 69 | + ) |
70 | 70 | } |
0 commit comments