47 lines
1.3 kB
1
import React from "@moonlight-mod/wp/react";
2
import spacepack from "@moonlight-mod/wp/spacepack_spacepack";
3
import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
4
import { Text } from "@moonlight-mod/wp/discord/components/common/index";
5
6
const Margins = spacepack.require("discord/styles/shared/Margins.css");
7
const HelpMessageClasses = spacepack.findByExports("positive", "iconDiv")[0].exports;
8
9
// reimpl of HelpMessage but with a custom icon
10
export default function HelpMessage({
11
className,
12
text,
13
icon,
14
children
15
}: {
16
className?: string;
17
text: string;
18
icon: React.ComponentType<any>;
19
children?: React.ReactNode;
20
}) {
21
return (
22
<div
23
className={`${Margins.marginBottom20} ${HelpMessageClasses.info} ${HelpMessageClasses.container} moonbase-help-message ${className}`}
24
>
25
<Flex direction={Flex.Direction.HORIZONTAL}>
26
<div
27
className={HelpMessageClasses.iconDiv}
28
style={{
29
alignItems: "center"
30
}}
31
>
32
{React.createElement(icon, {
33
size: "sm",
34
color: "currentColor",
35
className: HelpMessageClasses.icon
36
})}
37
</div>
38
39
<Text variant="text-sm/medium" color="currentColor" className={HelpMessageClasses.text}>
40
{text}
41
</Text>
42
43
{children}
44
</Flex>
45
</div>
46
);
47
}
48