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";
4
5import ExtensionsPage from "./extensions";
6import ConfigPage from "./config";
7
8const Margins = spacepack.findByCode("marginCenterHorz:")[0].exports;
9
10const { Divider } = spacepack.findByCode(".default.HEADER_BAR")[0].exports
11 .default;
12const TitleBarClasses = spacepack.findByCode("iconWrapper:", "children:")[0]
13 .exports;
14const TabBarClasses = spacepack.findByCode("nowPlayingColumn:")[0].exports;
15
16export const pages: Record<
17 string,
18 {
19 name: string;
20 element: React.FunctionComponent;
21 }
22> = {
23 extensions: {
24 name: "Extensions",
25 element: ExtensionsPage
26 },
27 config: {
28 name: "Config",
29 element: ConfigPage
30 }
31};
32
33export function Moonbase() {
34 const [selectedTab, setSelectedTab] = React.useState(Object.keys(pages)[0]);
35
36 return (
37 <>
38 <div className={`${TitleBarClasses.children} ${Margins.marginBottom20}`}>
39 <Text
40 className={TitleBarClasses.titleWrapper}
41 variant="heading-lg/semibold"
42 tag="h2"
43 >
44 Moonbase
45 </Text>
46 <Divider />
47 <TabBar
48 selectedItem={selectedTab}
49 onItemSelect={setSelectedTab}
50 type="top-pill"
51 className={TabBarClasses.tabBar}
52 >
53 {Object.entries(pages).map(([id, page]) => (
54 <TabBar.Item key={id} id={id} className={TabBarClasses.item}>
55 {page.name}
56 </TabBar.Item>
57 ))}
58 </TabBar>
59 </div>
60
61 {React.createElement(pages[selectedTab].element)}
62 </>
63 );
64}