this repo has no description
notnite.com
1import React from "@moonlight-mod/wp/react";
2import Flex from "@moonlight-mod/wp/discord/uikit/Flex";
3import { Text } from "@moonlight-mod/wp/discord/components/common/index";
4import HelpMessageClasses from "@moonlight-mod/wp/discord/components/common/HelpMessage.css";
5import Margins from "@moonlight-mod/wp/discord/styles/shared/Margins.css";
6
7// reimpl of HelpMessage but with a custom icon
8export 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}