import React from "react"; import PropTypes from "prop-types"; import clsx from "clsx"; import { Link } from "gatsby"; import { NavDropdown } from "react-bootstrap"; import IconText from "components/IconText"; import getBaseUrl from "utils/getBaseUrl"; import "./LanguageSelector.scss"; const LanguageSelector = ({ defaultLang, langKey, langTextMap }) => { return ( <NavDropdown title={<IconText iconName="LanguageIcon" text={langTextMap[langKey]} />} id="language-dropdown" className="language-selector" > {Object.keys(langTextMap).map((key) => { return ( <Link key={key} to={getBaseUrl(defaultLang, key)} className={clsx("dropdown-item", { active: key === langKey })} > {langTextMap[key]} </Link> ); })} </NavDropdown> ); }; LanguageSelector.propTypes = { defaultLang: PropTypes.string, langKey: PropTypes.string, langTextMap: PropTypes.object, }; LanguageSelector.defaultProps = { defaultLang: "en", langKey: "en", langTextMap: { en: "English", }, }; export default LanguageSelector;