feat: add support for passing array of messages

Author: bishalshrestha013

apps/demo/src/Views/Ui/components/Message.tsx

@@ -25,7 +25,7 @@ export const MessageDemo = () => {
       default: "-",
       description: t("message.table.propDescription.message"),
       prop: "message",
-      type: "string | ReactNode",
+      type: "string | string[] | ReactNode",
     },
     {
       default: "-",
@@ -75,6 +75,28 @@ export const MessageDemo = () => {
         <CodeBlock exampleCode="<Message message={<b>Season sale: Up to 50% off selected items!</b>} />" />
       </Section>
 
+      <Section title={t("message.usage.arrayMessage")}>
+        <Message
+          message={[
+            t("message.contents.content1"),
+            t("message.contents.content2"),
+            t("message.contents.content3"),
+          ]}
+          enableClose={true}
+        />
+        <CodeBlock
+          exampleCode="<Message
+  message={
+    [
+      'Season Sale: Enjoy massive discounts with up to 50% off on a wide range of selected items — from fashion to electronics, don’t miss out on these limited-time offers!',
+      'New features just launched! Check them out!',
+      'New Year, New You: Start fresh with our services!'
+    ]}
+    enableClose={true}
+/>"
+        />
+      </Section>
+
       <Section title={t("message.usage.icons.icon")}>
         <Message
           message={t("message.contents.content2")}

apps/demo/src/locales/en/ui.json

@@ -216,7 +216,7 @@
   },
   "message": {
     "contents": {
-      "content1": "Season sale: Up to 50% off selected items!",
+      "content1": "Season Sale: Enjoy massive discounts with up to 50% off on a wide range of selected items — from fashion to electronics, don’t miss out on these limited-time offers!",
       "content2": "New features just launched! Check them out!",
       "content3": "New Year, New You: Start fresh with our services!",
       "content4": "We value your feedback: take our quick survey!",
@@ -245,6 +245,7 @@
     },
     "title": "Message",
     "usage": {
+      "arrayMessage": "Array of message",
       "basic": "Basic",
       "customMessage": "Custom message",
       "enableClose": "Enable close",

apps/demo/src/locales/fr/ui.json

@@ -216,7 +216,7 @@
   },
   "message": {
     "contents": {
-      "content1": "Season sale: Up to 50% off selected items! (fr)",
+      "content1": "Season Sale: Enjoy massive discounts with up to 50% off on a wide range of selected items — from fashion to electronics, don’t miss out on these limited-time offers! (fr)",
       "content2": "New features just launched! Check them out! (fr)",
       "content3": "New Year, New You: Start fresh with our services! (fr)",
       "content4": "We value your feedback: take our quick survey! (fr)",
@@ -245,12 +245,13 @@
     },
     "title": "Message (fr)",
     "usage": {
+      "arrayMessage": "Array of message (fr)",
       "basic": "Basic (fr)",
       "customMessage": "Custom message (fr)",
       "enableClose": "Enable close (fr)",
       "hideIcon": "Hide default icon (fr)",
       "icons": {
-        "customIcon": "Icon slot (fr)",
+        "customIcon": "Custom icon (fr)",
         "icon": "Icon (fr)"
       },
       "severity": "Severity (fr)"

packages/ui/src/Message/index.tsx

@@ -2,8 +2,8 @@ import { ReactNode, useState } from "react";
 
 type MessageProperties = {
   enableClose?: boolean;
-  icon?: string | ReactNode;
-  message: string | ReactNode;
+  icon?: ReactNode;
+  message: string[] | ReactNode;
   onClose?: () => void;
   severity?: "info" | "success" | "warning" | "danger";
   showIcon?: boolean;
@@ -54,7 +54,17 @@ const Message = ({
 
   const renderMessageContent = () => {
     if (typeof message === "string") {
-      return <span className="message-content">{message}</span>;
+      return <span>{message}</span>;
+    }
+
+    if (Array.isArray(message)) {
+      return (
+        <ul>
+          {message.map((message_, index) => (
+            <li key={index}>{message_}</li>
+          ))}
+        </ul>
+      );
     }
 
     return message;
@@ -63,7 +73,7 @@ const Message = ({
   return (
     <div className={`message ${severity}`}>
       {showIcon && renderIcon()}
-      {renderMessageContent()}
+      <div className="message-content">{renderMessageContent()}</div>
       {enableClose && (
         <span className="close-message" onClick={handleClose}>
           <i className="pi pi-times"></i>

packages/ui/src/assets/css/message.css

@@ -12,6 +12,15 @@
   flex: 1;
 }
 
+.message-content ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  list-style-type: disc;
+  margin: 0 1rem;
+  padding: 0;
+}
+
 .message .close-message {
   color: var(--color);
   cursor: pointer;