-
Notifications
You must be signed in to change notification settings - Fork 15
/
Copy pathLanguagePicker.tsx
98 lines (89 loc) · 2.33 KB
/
LanguagePicker.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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
"use client";
import { useLocale } from "next-intl";
import { usePathname } from "next/navigation";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import Cookies from "js-cookie";
import { Globe } from "lucide-react";
type LanguagePickerProps = {
availableLanguages: string[];
};
const languageNames: Record<string, string> = {
"af-ZA": "Afrikaans",
"ar-SA": "العربية",
"ca-ES": "Català",
"cs-CZ": "Čeština",
"da-DK": "Dansk",
"de-DE": "Deutsch",
"el-GR": "Ελληνικά",
en: "English",
"es-ES": "Español",
"fa-IR": "فارسی",
"fi-FI": "Suomi",
"fr-FR": "Français",
"he-IL": "עברית",
"hi-IN": "हिन्दी",
"hu-HU": "Magyar",
"id-ID": "Bahasa Indonesia",
"it-IT": "Italiano",
"ja-JP": "日本語",
"ko-KR": "한국어",
"nl-NL": "Nederlands",
"no-NO": "Norsk",
"pl-PL": "Polski",
"pt-BR": "Português (Brasil)",
"pt-PT": "Português",
"ro-RO": "Română",
"ru-RU": "Русский",
"sr-SP": "Српски",
"sv-SE": "Svenska",
"ta-IN": "தமிழ்",
"tr-TR": "Türkçe",
"uk-UA": "Українська",
"vi-VN": "Tiếng Việt",
"zh-CN": "简体中文",
"zh-TW": "繁體中文",
};
export default function LanguagePicker({
availableLanguages,
}: LanguagePickerProps) {
const locale = useLocale();
const pathname = usePathname();
const handleLanguageChange = (newLocale: string) => {
Cookies.set("NEXT_LOCALE", newLocale, { path: "/" });
const segments = pathname.split("/").filter(Boolean);
const pathWithoutLocale =
segments.length > 1 ? `/${segments.slice(1).join("/")}` : "/";
const newPath =
newLocale === "en"
? pathWithoutLocale
: `/${newLocale}${pathWithoutLocale}`;
window.location.href = newPath;
};
return (
<Select
defaultValue={locale}
onValueChange={handleLanguageChange}
>
<SelectTrigger className="w-[180px]">
<Globe className="mr-2 h-4 w-4" />
<SelectValue placeholder="Select language" />
</SelectTrigger>
<SelectContent>
{availableLanguages.map((lang) => (
<SelectItem
key={lang}
value={lang}
>
{languageNames[lang] || lang}
</SelectItem>
))}
</SelectContent>
</Select>
);
}