49 lines
1.4 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.findByCode("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
type = "info"
16
}: {
17
className?: string;
18
text: string;
19
icon: React.ComponentType<any>;
20
type?: "warning" | "positive" | "error" | "info";
21
children?: React.ReactNode;
22
}) {
23
return (
24
<div
25
className={`${Margins.marginBottom20} ${HelpMessageClasses[type]} ${HelpMessageClasses.container} moonbase-help-message ${className}`}
26
>
27
<Flex direction={Flex.Direction.HORIZONTAL}>
28
<div
29
className={HelpMessageClasses.iconDiv}
30
style={{
31
alignItems: "center"
32
}}
33
>
34
{React.createElement(icon, {
35
size: "sm",
36
color: "currentColor",
37
className: HelpMessageClasses.icon
38
})}
39
</div>
40
41
<Text variant="text-sm/medium" color="currentColor" className={HelpMessageClasses.text}>
42
{text}
43
</Text>
44
45
{children}
46
</Flex>
47
</div>
48
);
49
}
50