44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import Text from "../../../components/Text/Text";
|
|
import Dropdown from "../../../components/Dropdown/Dropdown";
|
|
import Button from "../../../components/Button/Button";
|
|
import LanguageIcon from "../../../components/Svg/Icons/Language";
|
|
import { Language } from "../types";
|
|
import MenuButton from "./MenuButton";
|
|
|
|
interface Props {
|
|
currentLang: string;
|
|
langs: Language[];
|
|
setLang: (lang: Language) => void;
|
|
}
|
|
|
|
const ButtonStyle = styled(Button)`
|
|
padding-left: 0;
|
|
`;
|
|
|
|
const LangSelector: React.FC<Props> = ({ currentLang, langs, setLang }) => (
|
|
<Dropdown
|
|
position="top-right"
|
|
target={
|
|
<ButtonStyle variant="text" startIcon={<LanguageIcon color="textSubtle" width="24px" />}>
|
|
<Text color="textSubtle">{currentLang?.toUpperCase()}</Text>
|
|
</ButtonStyle>
|
|
}
|
|
>
|
|
{langs.map((lang) => (
|
|
<MenuButton
|
|
key={lang.locale}
|
|
fullWidth
|
|
onClick={() => setLang(lang)}
|
|
// Safari fix
|
|
style={{ minHeight: "32px", height: "auto" }}
|
|
>
|
|
{lang.language}
|
|
</MenuButton>
|
|
))}
|
|
</Dropdown>
|
|
);
|
|
|
|
export default React.memo(LangSelector, (prev, next) => prev.currentLang === next.currentLang);
|