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