feat(plugin-docs): Added mdx Message component for docs
ADD
packages/plugin-docs/client/theme-doc/components/Message.tsx
+import React, { PropsWithChildren } from "react"
+
+enum MessageType {
+ Info = "info",
+ Success = "success",
+ Warning = "warning",
+ Error = "error",
+}
+
+interface MessageProps {
+ type?: MessageType
+ emoji?: string
+}
+
+function Message(props: PropsWithChildren<MessageProps>) {
+ let bgColor = 'bg-blue-50';
+ let textColor = 'text-blue-900';
+
+ switch (props.type) {
+ case MessageType.Success:
+ bgColor = 'bg-green-50';
+ textColor = 'text-green-900';
+ break;
+ case MessageType.Warning:
+ bgColor = 'bg-orange-50';
+ textColor = 'text-orange-900';
+ break;
+ case MessageType.Error:
+ bgColor = 'bg-red-50';
+ textColor = 'text-red-900';
+ break;
+ }
+
+ return <>
+ <div
+ className={`w-full py-3 px-4 ${bgColor} ${textColor} rounded-lg my-2`}>
+ {props.emoji && <span role="img" className="mr-3">
+ {props.emoji}
+ </span>}
+ {props.children}
+ </div>
+ </>
+}
+
+export default Message

MODIFY
packages/plugin-docs/client/theme-doc/index.ts
packages/plugin-docs/client/theme-doc/index.ts
import './tailwind.out.css';
export { default as Layout } from './Layout';
+
+// Components
+export { default as Message } from './components/Message';

MODIFY
packages/plugin-docs/tailwind.config.js
packages/plugin-docs/tailwind.config.js
module.exports = {
- content: ['./client/theme-doc/*.tsx'],
+ content: ['./client/theme-doc/**/*.tsx'],
darkMode: 'class'
};

feat(plugin-docs): Added mdx Message component for docs (#310)