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