Added dark mode toggle
This commit is contained in:
parent
bb63827e2a
commit
a6a7aa00c2
@ -112,11 +112,14 @@ export default class Home extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
console.log(this.state.steamId);
|
||||||
return this.state.loading ? (
|
return this.state.loading ? (
|
||||||
<h1>Loading...</h1>
|
<h1>Loading...</h1>
|
||||||
) : (
|
) : (
|
||||||
<div className={styles.main}>
|
<div className={styles.main}>
|
||||||
<NavBar></NavBar>
|
<NavBar
|
||||||
|
avatarUrl={`https://cdn.scoresaber.com/avatars/${this.state.steamId}.jpg`}
|
||||||
|
></NavBar>
|
||||||
|
|
||||||
<Container
|
<Container
|
||||||
css={{
|
css={{
|
||||||
@ -156,12 +159,16 @@ export default class Home extends Component {
|
|||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Text h1>BeatSaber Overlay</Text>
|
<Text h1 css={{ color: "$text" }}>
|
||||||
<Text h4>Welcome to the Setup panel</Text>
|
BeatSaber Overlay
|
||||||
|
</Text>
|
||||||
|
<Text h4 css={{ color: "$text" }}>
|
||||||
|
Welcome to the Setup panel
|
||||||
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
<Grid xs={12}>
|
<Grid xs={12} lg={9}>
|
||||||
<Card>
|
<Card>
|
||||||
<Card.Body>
|
<Card.Body>
|
||||||
<Spacer y={1} />
|
<Spacer y={1} />
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { Navbar, Text } from "@nextui-org/react";
|
import { Navbar, Text } from "@nextui-org/react";
|
||||||
|
import Settings from "./Settings";
|
||||||
|
|
||||||
const NavBar = () => {
|
const NavBar = (props) => {
|
||||||
return (
|
return (
|
||||||
<Navbar isBordered variant={"sticky"}>
|
<Navbar isBordered variant={"sticky"}>
|
||||||
<Navbar.Brand>
|
<Navbar.Brand>
|
||||||
@ -8,6 +9,10 @@ const NavBar = () => {
|
|||||||
BeatSaber Overlay
|
BeatSaber Overlay
|
||||||
</Text>
|
</Text>
|
||||||
</Navbar.Brand>
|
</Navbar.Brand>
|
||||||
|
|
||||||
|
<Navbar.Content>
|
||||||
|
<Settings {...props}></Settings>
|
||||||
|
</Navbar.Content>
|
||||||
</Navbar>
|
</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