74 lines
2.5 kB
1
import React from "@moonlight-mod/wp/react";
2
import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
3
import { Text, TabBar } from "@moonlight-mod/wp/discord/components/common/index";
4
import { useStateFromStores } from "@moonlight-mod/wp/discord/packages/flux";
5
import { UserSettingsModalStore } from "@moonlight-mod/wp/common_stores";
6
7
import ExtensionsPage from "./extensions";
8
import ConfigPage from "./config";
9
import Update from "./update";
10
import { MoonbaseSettingsStore } from "@moonlight-mod/wp/moonbase_stores";
11
12
const { Divider } = spacepack.findByCode(".forumOrHome]:")[0].exports.Z;
13
const TitleBarClasses = spacepack.findByCode("iconWrapper:", "children:")[0].exports;
14
const TabBarClasses = spacepack.findByCode("nowPlayingColumn:")[0].exports;
15
const { setSection, clearSubsection } = spacepack.findByExports("setSection", "clearSubsection")[0].exports.Z;
16
const Margins = spacepack.require("discord/styles/shared/Margins.css");
17
18
export const pages: {
19
id: string;
20
name: string;
21
element: React.FunctionComponent;
22
}[] = [
23
{
24
id: "extensions",
25
name: "Extensions",
26
element: ExtensionsPage
27
},
28
{
29
id: "config",
30
name: "Config",
31
element: ConfigPage
32
}
33
];
34
35
export function Moonbase(props: { initialTab?: number } = {}) {
36
const subsection = useStateFromStores([UserSettingsModalStore], () => UserSettingsModalStore.getSubsection() ?? 0);
37
const setSubsection = React.useCallback(
38
(to: string) => {
39
if (subsection !== to) setSection("moonbase", to);
40
},
41
[subsection]
42
);
43
44
React.useEffect(
45
() => () => {
46
// 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
47
clearSubsection("moonbase");
48
MoonbaseSettingsStore.showOnlyUpdateable = false;
49
},
50
[]
51
);
52
53
return (
54
<>
55
<div className={`${TitleBarClasses.children} ${Margins.marginBottom20}`}>
56
<Text className={TitleBarClasses.titleWrapper} variant="heading-lg/semibold" tag="h2">
57
Moonbase
58
</Text>
59
<Divider />
60
<TabBar selectedItem={subsection} onItemSelect={setSubsection} type="top-pill" className={TabBarClasses.tabBar}>
61
{pages.map((page, i) => (
62
<TabBar.Item key={page.id} id={i} className={TabBarClasses.item}>
63
{page.name}
64
</TabBar.Item>
65
))}
66
</TabBar>
67
</div>
68
69
<Update />
70
71
{React.createElement(pages[subsection].element)}
72
</>
73
);
74
}
75