this repo has no description
notnite.com
1import {
2 Text,
3 useThemeContext,
4 Button,
5 AngleBracketsIcon,
6 BookCheckIcon,
7 ClydeIcon
8} from "@moonlight-mod/wp/discord/components/common/index";
9import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
10import React from "@moonlight-mod/wp/react";
11import MarkupUtils from "@moonlight-mod/wp/discord/modules/markup/MarkupUtils";
12import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
13
14const wordmark = "https://raw.githubusercontent.com/moonlight-mod/moonlight/refs/heads/main/img/wordmark.png";
15const wordmarkLight =
16 "https://raw.githubusercontent.com/moonlight-mod/moonlight/refs/heads/main/img/wordmark-light.png";
17
18function parse(str: string) {
19 return MarkupUtils.parse(str, true, {
20 allowHeading: true,
21 allowLinks: true,
22 allowList: true
23 });
24}
25
26function Dev({ name, picture, link }: { name: string; picture: string; link: string }) {
27 return (
28 <Button onClick={() => window.open(link)} color={Button.Colors.PRIMARY} className="moonbase-dev">
29 <Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER} className="moonbase-gap">
30 <img src={picture} alt={name} className="moonbase-dev-avatar" />
31
32 <Text variant="text-md/semibold">{name}</Text>
33 </Flex>
34 </Button>
35 );
36}
37
38function IconButton({
39 text,
40 link,
41 icon,
42 openInClient
43}: {
44 text: string;
45 link: string;
46 icon: React.FC<any>;
47 openInClient?: boolean;
48}) {
49 return (
50 <Button
51 onClick={() => {
52 if (openInClient) {
53 try {
54 const { handleClick } = spacepack.require("discord/utils/MaskedLinkUtils");
55 handleClick({ href: link });
56 } catch {
57 window.open(link);
58 }
59 } else {
60 // Will open externally in the user's browser
61 window.open(link);
62 }
63 }}
64 >
65 <Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER} className="moonbase-gap">
66 {React.createElement(icon, {
67 size: "sm",
68 color: "currentColor"
69 })}
70 {text}
71 </Flex>
72 </Button>
73 );
74}
75
76export default function AboutPage() {
77 const darkTheme = useThemeContext()?.theme !== "light";
78
79 return (
80 <Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.CENTER} className="moonbase-about-page">
81 <img src={darkTheme ? wordmarkLight : wordmark} alt="moonlight wordmark" className="moonbase-wordmark" />
82
83 <Text variant="heading-lg/medium">created by:</Text>
84 <div className="moonbase-devs">
85 <Dev name="Cynosphere" picture="https://github.com/Cynosphere.png" link="https://github.com/Cynosphere" />
86 <Dev name="NotNite" picture="https://github.com/NotNite.png" link="https://github.com/NotNite" />
87 <Dev name="adryd" picture="https://github.com/adryd325.png" link="https://github.com/adryd325" />
88 <Dev name="redstonekasi" picture="https://github.com/redstonekasi.png" link="https://github.com/redstonekasi" />
89 </div>
90
91 <Flex direction={Flex.Direction.HORIZONTAL} align={Flex.Align.CENTER} className="moonbase-gap">
92 <IconButton text="View source" icon={AngleBracketsIcon} link="https://github.com/moonlight-mod/moonlight" />
93 <IconButton text="Open the docs" icon={BookCheckIcon} link="https://moonlight-mod.github.io/" />
94 <IconButton text="Join the server" icon={ClydeIcon} link="https://discord.gg/FdZBTFCP6F" openInClient={true} />
95 </Flex>
96
97 <Flex direction={Flex.Direction.VERTICAL} align={Flex.Align.START}>
98 <Text variant="text-sm/normal">
99 {parse(`moonlight \`${window.moonlight.version}\` on \`${window.moonlight.branch}\``)}
100 </Text>
101
102 <Text variant="text-sm/normal">
103 {parse(
104 "moonlight is licensed under the [GNU Lesser General Public License](https://www.gnu.org/licenses/lgpl-3.0.html) (`LGPL-3.0-or-later`)."
105 )}
106 </Text>
107 </Flex>
108 </Flex>
109 );
110}