Added more languages and picker

frontend/src/components/Dropdown/DropdownItem.tsx

@@ -45,6 +45,7 @@ export const DropdownItem: React.FC<DropdownItemProps> = ({
 	icon,
 	href,
 	onClick,
+	...rest
 }) => {
 	return divider ? (
 		<div className={cn("dropdown-divider", className)} />
@@ -57,7 +58,8 @@ export const DropdownItem: React.FC<DropdownItemProps> = ({
 				className,
 			)}
 			href={href}
-			onClick={onClick}>
+			onClick={onClick}
+			{...rest}>
 			{icon && <span className="dropdown-item-icon">{icon}</span>}
 			{children}
 		</a>

frontend/src/components/Flag/Flag.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import cn from "classnames";
+
+export interface FlagProps {
+	/**
+	 * Additional Class
+	 */
+	className?: string;
+	/**
+	 * Country code of flag
+	 */
+	country: string;
+	/**
+	 * Size of the flag
+	 */
+	size?: string;
+}
+export const Flag: React.FC<FlagProps> = ({ className, country, size }) => {
+	const classes = [
+		`flag-country-${country.toLowerCase()}`,
+		{
+			[`flag-${size}`]: !!size,
+		},
+	];
+
+	return <span className={cn("flag", classes, className)} />;
+};

frontend/src/components/Flag/index.ts

@@ -0,0 +1 @@
+export * from "./Flag";

frontend/src/components/LocalePicker.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+
+import { Button, Dropdown, Flag } from "components";
+import { useLocaleState } from "context";
+import { changeLocale, getFlagCodeForLocale, getLocale, intl } from "locale";
+
+export interface LocalPickerProps {
+	/**
+	 * On click handler
+	 */
+	onChange?: any;
+}
+
+export const LocalePicker: React.FC<LocalPickerProps> = ({
+	onChange,
+	...rest
+}) => {
+	const { locale, setLocale } = useLocaleState();
+
+	// const [locale, setLocale] = useState(getLocale());
+	const [localeShown, setLocaleShown] = useState(false);
+
+	const handleOnChange = (e: any) => {
+		changeLocale(e.currentTarget.rel);
+		setLocale(e.currentTarget.rel);
+		setLocaleShown(false);
+		onChange && onChange(locale);
+	};
+
+	const options = [
+		["us", "en-US"],
+		["de", "de-DE"],
+		["ir", "fa-IR"],
+	];
+
+	return (
+		<div className="dropdown" {...rest}>
+			<Button
+				shape="ghost"
+				onClick={(e: any) => {
+					setLocaleShown(!localeShown);
+					e.preventDefault();
+				}}
+				iconOnly>
+				<Flag country={getFlagCodeForLocale(locale)} />
+			</Button>
+			<Dropdown
+				className="dropdown-menu-end dropdown-menu-card"
+				show={localeShown}>
+				{options.map((item) => {
+					return (
+						<Dropdown.Item
+							key={`locale-${item[0]}`}
+							rel={item[1]}
+							icon={<Flag country={item[0]} />}
+							onClick={handleOnChange}>
+							{intl.formatMessage({
+								id: `locale-${item[1]}`,
+								defaultMessage: item[1],
+							})}
+						</Dropdown.Item>
+					);
+				})}
+			</Dropdown>
+		</div>
+	);
+};

frontend/src/components/SiteWrapper.tsx

@@ -2,9 +2,9 @@ import React, { ReactNode } from "react";
 
 import { Footer } from "components";
 import { Avatar, Dropdown, Navigation } from "components";
+import { LocalePicker } from "components";
 import { useAuthState, useUserState } from "context";
 import { intl } from "locale";
-import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
 import { NavMenu } from "./NavMenu";
@@ -45,16 +45,20 @@ function SiteWrapper({ children }: Props) {
 								defaultMessage: "Standard User",
 						  })
 				}
+				buttons={[<LocalePicker key="lp1" />]}
 				profileItems={[
 					<Dropdown.Item key="m1-2">
-						<FormattedMessage
-							id="profile.title"
-							defaultMessage="Profile settings"
-						/>
+						{intl.formatMessage({
+							id: "profile.title",
+							defaultMessage: "Profile settings",
+						})}
 					</Dropdown.Item>,
 					<Dropdown.Item divider key="m1-4" />,
 					<Dropdown.Item key="m1-6" onClick={logout}>
-						<FormattedMessage id="profile.logout" defaultMessage="Logout" />
+						{intl.formatMessage({
+							id: "profile.logout",
+							defaultMessage: "Logout",
+						})}
 					</Dropdown.Item>,
 				]}
 			/>

frontend/src/components/index.ts

@@ -5,9 +5,11 @@ export * from "./Badge";
 export * from "./Button";
 export * from "./ButtonList";
 export * from "./Dropdown";
+export * from "./Flag";
 export * from "./Footer";
 export * from "./Loader";
 export * from "./Loading";
+export * from "./LocalePicker";
 export * from "./Navigation";
 export * from "./NavMenu";
 export * from "./Router";