55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import React from "react"
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
|
import { faLanguage } from "@fortawesome/free-solid-svg-icons"
|
|
import styled from "styled-components"
|
|
import ReactTooltip from "react-tooltip"
|
|
|
|
import { LanguageContext } from "../App"
|
|
import theming from "../theming"
|
|
|
|
interface StyledThemeButtonProps {
|
|
language: string
|
|
}
|
|
|
|
export default class LanguageToggleButton extends React.Component {
|
|
StyledThemeButton = styled.div<StyledThemeButtonProps>`
|
|
${theming.styles.navbarButtonStyle}
|
|
${(props) =>
|
|
props.language == "en"
|
|
? ""
|
|
: "transform: scaleX(-1);\
|
|
-moz-transform: scaleX(-1);\
|
|
-webkit-transform: scaleX(-1);\
|
|
-ms-transform: scaleX(-1);"};
|
|
`
|
|
|
|
languageName = (language) => {
|
|
let name = "English"
|
|
if (language == "kr") name = "Korean"
|
|
return name
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<LanguageContext.Consumer>
|
|
{({ language, toggleLanguage }) => (
|
|
<>
|
|
<this.StyledThemeButton
|
|
data-tip
|
|
data-for="language"
|
|
onClick={toggleLanguage}
|
|
language={language}
|
|
>
|
|
<FontAwesomeIcon icon={faLanguage} />
|
|
</this.StyledThemeButton>
|
|
<ReactTooltip id="language" type="dark" effect="solid">
|
|
<span>
|
|
Using {this.languageName(language)} language
|
|
</span>
|
|
</ReactTooltip>
|
|
</>
|
|
)}
|
|
</LanguageContext.Consumer>
|
|
)
|
|
}
|
|
}
|