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