6676e0ced8
* chore: typo * fix: linter issues * chore: fix linter * chore: fix linter * chore: add relocate data folder
56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import { useGeneralSetting } from '@/hooks/useGeneralSetting'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const LANGUAGES = [
|
|
{ value: 'en', label: 'English' },
|
|
{ value: 'id', label: 'Bahasa' },
|
|
{ value: 'vn', label: 'Tiếng Việt' },
|
|
]
|
|
|
|
export default function LanguageSwitcher() {
|
|
const { i18n } = useTranslation()
|
|
const { setCurrentLanguage, currentLanguage } = useGeneralSetting()
|
|
|
|
const changeLanguage = (lng: string) => {
|
|
i18n.changeLanguage(lng)
|
|
setCurrentLanguage(lng as Language)
|
|
}
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<span
|
|
title="Change Language"
|
|
className="flex cursor-pointer items-center gap-1 px-2 py-1 rounded-sm bg-main-view-fg/15 text-sm outline-none text-main-view-fg font-medium"
|
|
>
|
|
{LANGUAGES.find(
|
|
(lang: { value: string; label: string }) =>
|
|
lang.value === currentLanguage
|
|
)?.label || 'English'}
|
|
</span>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-24">
|
|
{LANGUAGES.map((lang) => (
|
|
<DropdownMenuItem
|
|
key={lang.value}
|
|
className={cn(
|
|
'cursor-pointer my-0.5',
|
|
currentLanguage === lang.value && 'bg-main-view-fg/5'
|
|
)}
|
|
onClick={() => changeLanguage(lang.value)}
|
|
>
|
|
{lang.label}
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|