feat: rewrite message component

2026-07-12 23:56:36 +08:00 · 2022-07-28 23:42:05 +08:00
parent d5f6ab0bb5
commit 0cce817813
10 changed files with 224 additions and 88 deletions
@@ -0,0 +1,69 @@
+import { forwardRef } from 'react';
+import { NotificationContentProps } from '../notification';
+/* eslint-disable no-restricted-imports */
+import Alert from '@mui/material/Alert';
+
+// TODO: Variants types of message content await designers
+const commonStyle = { background: '#fff' };
+export const SuccessMessage = forwardRef<
+    HTMLDivElement,
+    NotificationContentProps
+>(({ message, id }, ref) => {
+    return (
+        <Alert
+            variant="outlined"
+            severity="success"
+            ref={ref}
+            style={commonStyle}
+        >
+            {message}
+        </Alert>
+    );
+});
+
+export const ErrorMessage = forwardRef<
+    HTMLDivElement,
+    NotificationContentProps
+>(({ message, id }, ref) => {
+    return (
+        <Alert
+            variant="outlined"
+            severity="error"
+            ref={ref}
+            style={commonStyle}
+        >
+            {message}
+        </Alert>
+    );
+});
+
+export const WarningMessage = forwardRef<
+    HTMLDivElement,
+    NotificationContentProps
+>(({ message, id }, ref) => {
+    return (
+        <Alert
+            variant="outlined"
+            severity="warning"
+            ref={ref}
+            style={commonStyle}
+        >
+            {message}
+        </Alert>
+    );
+});
+
+export const InfoMessage = forwardRef<HTMLDivElement, NotificationContentProps>(
+    ({ message, id }, ref) => {
+        return (
+            <Alert
+                variant="outlined"
+                severity="info"
+                ref={ref}
+                style={commonStyle}
+            >
+                {message}
+            </Alert>
+        );
+    }
+);