You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.8 KiB
66 lines
1.8 KiB
import React from 'react';
|
|
|
|
import { Jp, Pt, Us } from 'react-flags-select';
|
|
|
|
import { Menu } from '@headlessui/react';
|
|
|
|
import { useAppDispatch } from '../../../hooks/redux';
|
|
import i18n from '../../../translation';
|
|
import { Button } from '../../generic/Button';
|
|
|
|
export const LanguageDropdown = (): JSX.Element => {
|
|
const dispatch = useAppDispatch();
|
|
|
|
const languages = [
|
|
{
|
|
name: 'English',
|
|
value: 'en',
|
|
flag: <Us className="w-6" />,
|
|
},
|
|
{
|
|
name: 'Português',
|
|
value: 'pt',
|
|
flag: <Pt className="w-6" />,
|
|
},
|
|
{
|
|
name: 'Japanese',
|
|
value: 'jp',
|
|
flag: <Jp className="w-6" />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Menu as="div" className="w-10 h-10">
|
|
<div className="absolute">
|
|
<Button>
|
|
<Menu.Button as="div">
|
|
<Us className="w-6 shadow rounded-sm" />
|
|
</Menu.Button>
|
|
</Button>
|
|
|
|
<Menu.Items className="z-20 absolute right-0 bg-white dark:bg-secondaryDark border dark:border-gray-600 divide-y divide-gray-200 dark:divide-gray-600 rounded-md shadow-md focus:outline-none">
|
|
{languages.map((language, index) => (
|
|
<Menu.Item
|
|
key={index}
|
|
onClick={() => {
|
|
i18n.changeLanguage(language.value);
|
|
}}
|
|
>
|
|
{({ active }) => (
|
|
<button
|
|
className={`dark:text-white first:rounded-t-md last:rounded-b-md space-x-2 group flex items-center w-full px-2 py-2 text-sm ${
|
|
active && 'bg-gray-200 dark:bg-gray-800'
|
|
}`}
|
|
>
|
|
{language.flag}
|
|
<p className="font-medium">{language.name}</p>
|
|
</button>
|
|
)}
|
|
</Menu.Item>
|
|
))}
|
|
{/* ... */}
|
|
</Menu.Items>
|
|
</div>
|
|
</Menu>
|
|
);
|
|
};
|
|
|