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