diff --git a/source/src/components/LanguageToggleButton.tsx b/source/src/components/LanguageToggleButton.tsx new file mode 100644 index 0000000..ba42d8a --- /dev/null +++ b/source/src/components/LanguageToggleButton.tsx @@ -0,0 +1,35 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import { faLanguage } from "@fortawesome/free-solid-svg-icons" +import styled from "styled-components" +import theme from "styled-theming" + +import ReactTooltip from "react-tooltip" + +import theming from "../theming" + +const StyledThemeButton = styled.div` + ${theming.styles.navbarButtonStyle} + transition: transform 0.2s linear; + /* ${theme("mode", { + light: "", + dark: "transform: scaleX(-1);\ + -moz-transform: scaleX(-1);\ + -webkit-transform: scaleX(-1);\ + -ms-transform: scaleX(-1);", + })}; */ +` + +function LanguageToggleButton() { + return ( + <> + + + + + Change to Korean/English + + + ) +} + +export default LanguageToggleButton diff --git a/source/src/components/Navbar.tsx b/source/src/components/Navbar.tsx index 1492ad9..3d89a11 100644 --- a/source/src/components/Navbar.tsx +++ b/source/src/components/Navbar.tsx @@ -10,7 +10,7 @@ import { Link } from "react-router-dom" import SearchBox from "./SearchBox" import Sidebar from "./Sidebar" import ThemeToggleButton from "./ThemeToggleButton" -import { faLanguage } from "@fortawesome/free-solid-svg-icons" +import LanguageToggleButton from "./LanguageToggleButton" const StyledNav = styled.nav` display: flex; @@ -71,13 +71,7 @@ function Navbar() { - - - - - - Change to Korean/English - + - Change theme + Using {_theme.mode} theme )}