47 lines
1.4 kB
1
import React from "@moonlight-mod/wp/react";
2
import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
3
import { Text } from "@moonlight-mod/wp/discord/components/common/index";
4
import HelpMessageClasses from "@moonlight-mod/wp/discord/components/common/HelpMessage.css";
5
import Margins from "@moonlight-mod/wp/discord/styles/shared/Margins.css";
6
7
// reimpl of HelpMessage but with a custom icon
8
export default function HelpMessage({
9
className,
10
text,
11
icon,
12
children,
13
type = "info"
14
}: {
15
className?: string;
16
text: string;
17
icon: React.ComponentType<any>;
18
type?: "warning" | "positive" | "error" | "info";
19
children?: React.ReactNode;
20
}) {
21
return (
22
<div
23
className={`${Margins.marginBottom20} ${HelpMessageClasses[type]} ${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