Added dark mode toggle
This commit is contained in:
parent
bb63827e2a
commit
a6a7aa00c2
@ -112,11 +112,14 @@ export default class Home extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.state.steamId);
|
||||
return this.state.loading ? (
|
||||
<h1>Loading...</h1>
|
||||
) : (
|
||||
<div className={styles.main}>
|
||||
<NavBar></NavBar>
|
||||
<NavBar
|
||||
avatarUrl={`https://cdn.scoresaber.com/avatars/${this.state.steamId}.jpg`}
|
||||
></NavBar>
|
||||
|
||||
<Container
|
||||
css={{
|
||||
@ -156,12 +159,16 @@ export default class Home extends Component {
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<Text h1>BeatSaber Overlay</Text>
|
||||
<Text h4>Welcome to the Setup panel</Text>
|
||||
<Text h1 css={{ color: "$text" }}>
|
||||
BeatSaber Overlay
|
||||
</Text>
|
||||
<Text h4 css={{ color: "$text" }}>
|
||||
Welcome to the Setup panel
|
||||
</Text>
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
<Grid xs={12}>
|
||||
<Grid xs={12} lg={9}>
|
||||
<Card>
|
||||
<Card.Body>
|
||||
<Spacer y={1} />
|
||||
|
@ -1,6 +1,7 @@
|
||||
import { Navbar, Text } from "@nextui-org/react";
|
||||
import Settings from "./Settings";
|
||||
|
||||
const NavBar = () => {
|
||||
const NavBar = (props) => {
|
||||
return (
|
||||
<Navbar isBordered variant={"sticky"}>
|
||||
<Navbar.Brand>
|
||||
@ -8,6 +9,10 @@ const NavBar = () => {
|
||||
BeatSaber Overlay
|
||||
</Text>
|
||||
</Navbar.Brand>
|
||||
|
||||
<Navbar.Content>
|
||||
<Settings {...props}></Settings>
|
||||
</Navbar.Content>
|
||||
</Navbar>
|
||||
);
|
||||
};
|
||||
|
52
src/components/Settings.js
Normal file
52
src/components/Settings.js
Normal file
@ -0,0 +1,52 @@
|
||||
import {
|
||||
Avatar as NextAvatar,
|
||||
changeTheme,
|
||||
Dropdown,
|
||||
Text,
|
||||
useTheme,
|
||||
} from "@nextui-org/react";
|
||||
|
||||
const Avatar = (props) => {
|
||||
const { isDark } = useTheme();
|
||||
|
||||
const avatarUrl =
|
||||
props.avatarUrl || "https://cdn.fascinated.cc/IkQFyodbZv.jpg?raw=true";
|
||||
|
||||
const handleChange = () => {
|
||||
const nextTheme = isDark ? "light" : "dark";
|
||||
window.localStorage.setItem("theme", nextTheme); // you can use any storage
|
||||
changeTheme(nextTheme);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dropdown>
|
||||
<Dropdown.Trigger>
|
||||
<NextAvatar
|
||||
bordered
|
||||
size="lg"
|
||||
as="button"
|
||||
color="primary"
|
||||
src={avatarUrl}
|
||||
/>
|
||||
</Dropdown.Trigger>
|
||||
<Dropdown.Menu aria-label="Static Actions">
|
||||
<Dropdown.Item>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<Text b onClick={() => handleChange()}>
|
||||
Toggle Dark Mode
|
||||
</Text>
|
||||
</div>
|
||||
</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Avatar;
|
Reference in New Issue
Block a user