feat: Language picker was added

frontend/src/mockingbird/components/Language/LanguagePicker.css

@@ -0,0 +1,18 @@
+.control {
+  display: flex;
+  width: 150px;
+  justify-content: flex-end;
+  padding: 8px 16px;
+  border-radius: 16px;
+  transition: background-color 150ms ease;
+}
+
+.itemContent {
+  align-content: center;
+  justify-content: space-between;
+}
+
+.icon {
+  width: 1.2rem;
+  height: 1.2rem;
+}

frontend/src/mockingbird/components/Language/LanguagePicker.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UnstyledButton, Menu, Group } from '@mantine/core';
+import IconCheck from '@tabler/icons-react/dist/esm/icons/IconCheck';
+import IconLanguage from '@tabler/icons-react/dist/esm/icons/IconLanguage';
+import styles from './LanguagePicker.css';
+
+type LanguageItem = { label: string; value: string };
+
+const data: LanguageItem[] = [
+  { label: 'English', value: 'en' },
+  { label: 'Русский', value: 'ru' },
+];
+
+export function LanguagePicker() {
+  const { i18n } = useTranslation();
+  const [opened, setOpened] = useState(false);
+  const [selected, setSelected] = useState(() => {
+    return data.find((item) => item.value === i18n.language) || data[0];
+  });
+  const handleSelectLanguage = (item: LanguageItem) => {
+    setOpened(false);
+    setSelected(item);
+    i18n.changeLanguage(item.value);
+  };
+  const items = data.map((item) => (
+    <Menu.Item onClick={() => handleSelectLanguage(item)} key={item.label}>
+      <Group className={styles.itemContent}>
+        <span>{item.label}</span>
+        {item.value === selected.value && <IconCheck className={styles.icon} />}
+      </Group>
+    </Menu.Item>
+  ));
+
+  return (
+    <Menu
+      onOpen={() => setOpened(true)}
+      onClose={() => setOpened(false)}
+      radius="md"
+      width="target"
+      withinPortal
+    >
+      <Menu.Target>
+        <UnstyledButton
+          className={styles.control}
+          data-expanded={opened || undefined}
+        >
+          <IconLanguage color="grey" size="1.2rem" />
+        </UnstyledButton>
+      </Menu.Target>
+      <Menu.Dropdown>{items}</Menu.Dropdown>
+    </Menu>
+  );
+}

frontend/src/mockingbird/components/Language/index.ts

@@ -1 +1 @@
-export { LanguageSwitcher } from './Language';
+export { LanguagePicker } from './LanguagePicker';

frontend/src/mockingbird/layers/layout/Header.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { connect } from '@tramvai/state';
 import { Container, Title, Flex } from '@mantine/core';
 import { getJson } from 'src/infrastructure/request';
-import { LanguageSwitcher } from 'src/mockingbird/components/Language';
+import { LanguagePicker } from 'src/mockingbird/components/Language';
 import { Shadow } from './Shadow';
 
 type Props = {
@@ -26,7 +26,7 @@ function Header({ assetsPrefix }: Props) {
           <Title order={2} mr="auto">
             {title}
           </Title>
-          <LanguageSwitcher />
+          <LanguagePicker />
         </Flex>
       </Container>
     </Shadow>