Skeleton for language picker.

src/components/Header.tsx

@@ -1,10 +1,15 @@
+import { FormattedMessage } from 'react-intl';
+import { LanguagePicker } from './LanguagePicker';
 import "./styles/header.scss"
 
 export const Header = () => {
     return (
         <header className="App-header">
-            <h1>Lintu ja Maslo</h1>
-            <p><i>Elokuussa 2022</i></p>
+            <h1><FormattedMessage id="common.title" /></h1>
+            <p><i><FormattedMessage id="common.subtitle" /></i></p>
+            <div className="LanguagePicker-container">
+                <LanguagePicker />
+            </div>
         </header>
     )
 }

src/components/LanguagePicker.tsx

@@ -0,0 +1,24 @@
+import DownOutlined from '@ant-design/icons/lib/icons/DownOutlined';
+import { Dropdown, Menu } from 'antd';
+import { useRecoilState } from 'recoil';
+import { currentLanguage } from '../atoms/language';
+import { languageItems } from '../constants/languageItems';
+import "./styles/languagePicker.scss"
+
+export const LanguagePicker = () => {
+    const [lang, setLang] = useRecoilState(currentLanguage)
+
+    const menu = (
+        <Menu>
+            {languageItems.map(lang => {
+                return (<Menu.Item key={lang.value} onClick={e => setLang(e.key)}>{lang.label}</Menu.Item>);
+            })}
+        </Menu>
+    );
+
+    return (
+        <Dropdown overlay={menu} trigger={["click"]}>
+            <span className="dropdown">{lang} <DownOutlined /></span>
+        </Dropdown>
+    )
+}

src/components/styles/header.scss

@@ -11,3 +11,9 @@
 .App-header h1 {
   color: white;
 }
+
+.LanguagePicker-container {
+  display: flex;
+  justify-content: end;
+  width: 24%;
+}

src/components/styles/languagePicker.scss

@@ -0,0 +1,6 @@
+.ant-dropdown-trigger.dropdown {
+  width: 50px;
+  border-radius: 5%;
+  margin-bottom: 10px;
+  background-color: dimgray;
+}