this repo has no description
notnite.com
1import React from "@moonlight-mod/wp/react";
2import { Text, TabBar } from "@moonlight-mod/wp/discord/components/common/index";
3import { useStateFromStores } from "@moonlight-mod/wp/discord/packages/flux";
4import { UserSettingsModalStore } from "@moonlight-mod/wp/common_stores";
5
6import ExtensionsPage from "./extensions";
7import ConfigPage from "./config";
8import AboutPage from "./about";
9import Update from "./update";
10import RestartAdviceMessage from "./RestartAdvice";
11import { Divider } from "@moonlight-mod/wp/discord/components/common/BaseHeaderBar";
12import HeaderBarClasses from "@moonlight-mod/wp/discord/components/common/HeaderBar.css";
13import PeoplePageClasses from "@moonlight-mod/wp/discord/modules/people/web/PeoplePage.css";
14import UserSettingsModalActionCreators from "@moonlight-mod/wp/discord/actions/UserSettingsModalActionCreators";
15import Margins from "@moonlight-mod/wp/discord/styles/shared/Margins.css";
16
17export 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
39export 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
85export { RestartAdviceMessage, Update };