From 5c63935c231c86081f954fd6d3b3c47b13356a61 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Sat, 26 Mar 2022 18:32:06 +0900
Subject: [PATCH] added locale toggle button

---
 src/components/Navbar/LocaleToggleButton.tsx | 47 ++++++++++++++++++++
 src/components/Navbar/Navbar.tsx             |  2 +
 2 files changed, 49 insertions(+)
 create mode 100644 src/components/Navbar/LocaleToggleButton.tsx

diff --git a/src/components/Navbar/LocaleToggleButton.tsx b/src/components/Navbar/LocaleToggleButton.tsx
new file mode 100644
index 0000000..d37361b
--- /dev/null
+++ b/src/components/Navbar/LocaleToggleButton.tsx
@@ -0,0 +1,47 @@
+import { useContext } from "react"
+import ReactTooltip from "react-tooltip"
+import styled from "styled-components"
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faLanguage } from "@fortawesome/free-solid-svg-icons"
+
+import { ActionsEnum, globalContext } from "../../globalContext"
+import theming from "../../styles/theming"
+
+import type { SiteLocale } from "../../globalContext"
+
+interface StyledLocaleToggleButtonProps {
+	locale: SiteLocale
+}
+
+const StyledLocaleToggleButton = styled.div<StyledLocaleToggleButtonProps>`
+	${theming.styles.navbarButtonStyle}
+	${(props) => (props.locale == "en" ? "" : "transform: scaleX(-1);")};
+`
+
+const LocaleToggleButton = () => {
+	const { globalState, dispatch } = useContext(globalContext)
+
+	return (
+		<>
+			<StyledLocaleToggleButton
+				locale={globalState.locale}
+				data-tip
+				data-for="locale"
+				onClick={() => {
+					dispatch({
+						type: ActionsEnum.UPDATE_LOCALE,
+						payload: globalState.locale == "en" ? "kr" : "en",
+					})
+				}}
+			>
+				<FontAwesomeIcon icon={faLanguage} />
+			</StyledLocaleToggleButton>
+			<ReactTooltip id="locale" type="dark" effect="solid">
+				<span>Locale: {globalState.locale}</span>
+			</ReactTooltip>
+		</>
+	)
+}
+
+export default LocaleToggleButton
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 1710ebf..955695d 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -2,6 +2,7 @@ import styled from "styled-components"
 import { Link } from "react-router-dom"
 
 import NavLinks from "./NavLinks"
+import LocaleToggleButton from "./LocaleToggleButton"
 import ThemeToggleButton from "./ThemeToggleButton"
 import SearchButton from "./SearchButton"
 import ReadProgress from "./ReadProgress"
@@ -72,6 +73,7 @@ const Navbar = () => {
 
 				{/* right buttons */}
 				<RightButtons>
+					<LocaleToggleButton />
 					<ThemeToggleButton />
 					<SearchButton />
 				</RightButtons>