2021-04-21 13:37:12 +00:00
|
|
|
import React, {useContext} from "react"
|
2021-04-23 00:18:06 +00:00
|
|
|
import Style from "./Logo.module.css"
|
2021-04-21 13:37:12 +00:00
|
|
|
import LogoDark from "../media/LogoDark.png"
|
|
|
|
import LogoLight from "../media/LogoLight.png"
|
|
|
|
import ContextTheme from "../contexts/ContextTheme"
|
2021-04-23 00:18:06 +00:00
|
|
|
import classNames from "classnames"
|
2021-04-21 13:37:12 +00:00
|
|
|
|
|
|
|
|
2021-04-23 00:18:06 +00:00
|
|
|
/**
|
|
|
|
* The N.E.S.T. logo.
|
|
|
|
*
|
|
|
|
* It loads a different image based on the currently selected theme.
|
|
|
|
*
|
|
|
|
* @param className - Additional class(es) to add to the image.
|
|
|
|
* @param props - Additional props to pass to the image.
|
|
|
|
* @returns {JSX.Element}
|
|
|
|
* @constructor
|
|
|
|
*/
|
|
|
|
export default function Logo({ className, ...props }) {
|
|
|
|
// I have no idea why IntelliJ is complaining about this line
|
|
|
|
// It's perfectly fine!
|
2021-04-21 16:58:14 +00:00
|
|
|
const [theme, ] = useContext(ContextTheme)
|
2021-04-21 13:37:12 +00:00
|
|
|
|
|
|
|
let logo;
|
|
|
|
if(theme === "ThemeDark") {
|
|
|
|
logo = LogoDark
|
|
|
|
}
|
|
|
|
else if(theme === "ThemeLight") {
|
|
|
|
logo = LogoLight
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
throw new Error(`Unknown theme: ${theme}`)
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2021-04-23 00:18:06 +00:00
|
|
|
<img src={logo} className={classNames(Style.Logo, className)} alt={"N.E.S.T."} {...props}/>
|
2021-04-21 13:37:12 +00:00
|
|
|
)
|
|
|
|
}
|