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