85 lines
2.7 kB
1
import React from "@moonlight-mod/wp/react";
2
import { Text, TabBar } from "@moonlight-mod/wp/discord/components/common/index";
3
import { useStateFromStores } from "@moonlight-mod/wp/discord/packages/flux";
4
import { UserSettingsModalStore } from "@moonlight-mod/wp/common_stores";
5
6
import ExtensionsPage from "./extensions";
7
import ConfigPage from "./config";
8
import AboutPage from "./about";
9
import Update from "./update";
10
import RestartAdviceMessage from "./RestartAdvice";
11
import { Divider } from "@moonlight-mod/wp/discord/components/common/BaseHeaderBar";
12
import HeaderBarClasses from "@moonlight-mod/wp/discord/components/common/HeaderBar.css";
13
import PeoplePageClasses from "@moonlight-mod/wp/discord/modules/people/web/PeoplePage.css";
14
import UserSettingsModalActionCreators from "@moonlight-mod/wp/discord/actions/UserSettingsModalActionCreators";
15
import Margins from "@moonlight-mod/wp/discord/styles/shared/Margins.css";
16
17
export const pages: {
18
id: string;
19
name: string;
20
element: React.FunctionComponent;
21
}[] = [
22
{
23
id: "extensions",
24
name: "Extensions",
25
element: ExtensionsPage
26
},
27
{
28
id: "config",
29
name: "Config",
30
element: ConfigPage
31
},
32
{
33
id: "about",
34
name: "About",
35
element: AboutPage
36
}
37
];
38
39
export function Moonbase(props: { initialTab?: number } = {}) {
40
const subsection = useStateFromStores([UserSettingsModalStore], () => UserSettingsModalStore.getSubsection() ?? 0);
41
const setSubsection = React.useCallback(
42
(to: string) => {
43
if (subsection !== to) UserSettingsModalActionCreators.setSection("moonbase", to);
44
},
45
[subsection]
46
);
47
48
React.useEffect(
49
() => () => {
50
// Normally there's an onSettingsClose prop you can set but we don't expose it and I don't care enough to add support for it right now
51
UserSettingsModalActionCreators.clearSubsection("moonbase");
52
},
53
[]
54
);
55
56
return (
57
<>
58
<div className={`${HeaderBarClasses.children} ${Margins.marginBottom20}`}>
59
<Text className={HeaderBarClasses.titleWrapper} variant="heading-lg/semibold" tag="h2">
60
Moonbase
61
</Text>
62
<Divider />
63
<TabBar
64
selectedItem={subsection}
65
onItemSelect={setSubsection}
66
type="top-pill"
67
className={PeoplePageClasses.tabBar}
68
>
69
{pages.map((page, i) => (
70
<TabBar.Item key={page.id} id={i} className={PeoplePageClasses.item}>
71
{page.name}
72
</TabBar.Item>
73
))}
74
</TabBar>
75
</div>
76
77
<RestartAdviceMessage />
78
<Update />
79
80
{React.createElement(pages[subsection].element)}
81
</>
82
);
83
}
84
85
export { RestartAdviceMessage, Update };
86