44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
import styled, { ThemeConsumer } from "styled-components"
|
|
import { isMobile } from "react-device-detect"
|
|
import ReactTooltip from "react-tooltip"
|
|
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
|
import { faMoon, faSun } from "@fortawesome/free-solid-svg-icons"
|
|
|
|
import theming from "../styles/theming"
|
|
|
|
const StyledThemeButton = styled.div`
|
|
${theming.styles.navbarButtonStyle}
|
|
${(props) =>
|
|
theming.theme(props.theme.currentTheme, {
|
|
light: "",
|
|
dark: "transform: scaleX(-1);",
|
|
})};
|
|
`
|
|
|
|
const Navbar = () => {
|
|
return (
|
|
<ThemeConsumer>
|
|
{({ currentTheme, setTheme }) => (
|
|
<>
|
|
<StyledThemeButton
|
|
data-tip
|
|
data-for="theme"
|
|
className="right"
|
|
onClick={() => setTheme(currentTheme === "dark" ? "light" : "dark")}
|
|
>
|
|
{currentTheme == "dark" && <FontAwesomeIcon icon={faMoon} />}
|
|
{currentTheme == "light" && <FontAwesomeIcon icon={faSun} />}
|
|
</StyledThemeButton>
|
|
{!isMobile && (
|
|
<ReactTooltip id="theme" type="dark" effect="solid">
|
|
<span>Using {currentTheme} theme</span>
|
|
</ReactTooltip>
|
|
)}
|
|
</>
|
|
)}
|
|
</ThemeConsumer>
|
|
)
|
|
}
|
|
|
|
export default Navbar
|