From 39cb240559046e637d410f4f883476656ab5e11d Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Tue, 22 Jul 2025 15:53:41 +0545
Subject: [PATCH] refactor: update the order of examples for Message component
 in demo app

---
 apps/demo/src/Views/Ui/components/Message.tsx | 78 ++++++++++---------
 apps/demo/src/locales/en/ui.json              | 11 ---
 apps/demo/src/locales/fr/ui.json              | 11 ---
 3 files changed, 41 insertions(+), 59 deletions(-)

diff --git a/apps/demo/src/Views/Ui/components/Message.tsx b/apps/demo/src/Views/Ui/components/Message.tsx
index 18b473d1b..33488c297 100644
--- a/apps/demo/src/Views/Ui/components/Message.tsx
+++ b/apps/demo/src/Views/Ui/components/Message.tsx
@@ -66,21 +66,45 @@ export const MessageDemo = () => {
       </Section>
 
       <Section title={t("message.usage.basic")}>
-        <Message message={t("message.contents.content1")} />
+        <Message message="Season sale: Up to 50% off selected items!" />
         <CodeBlock exampleCode='<Message message="Season sale: Up to 50% off selected items!" />' />
       </Section>
 
-      <Section title={t("message.usage.customMessage")}>
-        <Message message={<b>{t("message.contents.content1")}</b>} />
-        <CodeBlock exampleCode="<Message message={<b>Season sale: Up to 50% off selected items!</b>} />" />
+      <Section title={t("message.usage.severity")}>
+        <Message message="Info message" severity="info" />
+        <Message message="Success message" severity="success" />
+        <Message message="Warning message" severity="warning" />
+        <Message message="Danger message" severity="danger" />
+
+        <CodeBlock
+          exampleCode='<Message message="Info message" severity="info" />
+<Message message="Success message" severity="success" />
+<Message message="Warning message" severity="warning" />
+<Message message="Danger message" severity="danger" />'
+        />
+      </Section>
+
+      <Section title={t("message.usage.enableClose")}>
+        <Message
+          enableClose={true}
+          icon={<i className="pi pi-bell" />}
+          message="We value your feedback: take our quick survey!"
+        />
+        <CodeBlock
+          exampleCode='<Message 
+  message="We value your feedback: take our quick survey!"
+  icon={<i className="pi pi-bell" />}
+  enableClose={true}
+/>'
+        />
       </Section>
 
       <Section title={t("message.usage.arrayMessage")}>
         <Message
           message={[
-            t("message.contents.content1"),
-            t("message.contents.content2"),
-            t("message.contents.content3"),
+            "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}
         />
@@ -97,9 +121,14 @@ export const MessageDemo = () => {
         />
       </Section>
 
+      <Section title={t("message.usage.customMessage")}>
+        <Message message={<b>Season sale: Up to 50% off selected items!</b>} />
+        <CodeBlock exampleCode="<Message message={<b>Season sale: Up to 50% off selected items!</b>} />" />
+      </Section>
+
       <Section title={t("message.usage.icons.icon")}>
         <Message
-          message={t("message.contents.content2")}
+          message="New features just launched! Check them out!"
           icon="pi pi-android"
         />
         <CodeBlock
@@ -112,7 +141,7 @@ export const MessageDemo = () => {
 
       <Section title={t("message.usage.icons.customIcon")}>
         <Message
-          message={t("message.contents.content3")}
+          message="New Year, New You: Start fresh with our services!"
           icon={<i className="pi pi-bell" />}
         />
         <CodeBlock
@@ -123,36 +152,11 @@ export const MessageDemo = () => {
         />
       </Section>
 
-      <Section title={t("message.usage.enableClose")}>
+      <Section title={t("message.usage.hideIcon")}>
         <Message
-          enableClose={true}
-          icon={<i className="pi pi-bell" />}
-          message={t("message.contents.content4")}
-        />
-        <CodeBlock
-          exampleCode='<Message 
-  message="We value your feedback: take our quick survey!"
-  icon={<i className="pi pi-bell" />}
-  enableClose={true}
-/>'
+          message="Season sale: Up to 50% off selected items!"
+          showIcon={false}
         />
-      </Section>
-
-      <Section title={t("message.usage.severity")}>
-        <Message message={t("message.contents.info")} severity="info" />
-        <Message message={t("message.contents.success")} severity="success" />
-        <Message message={t("message.contents.warning")} severity="warning" />
-        <Message message={t("message.contents.danger")} severity="danger" />
-
-        <CodeBlock
-          exampleCode='<Message message="Info message" severity="info" />
-<Message message="Success message" severity="success" />
-<Message message="Warning message" severity="warning" />
-<Message message="Danger message" severity="danger" />'
-        />
-      </Section>
-      <Section title={t("message.usage.hideIcon")}>
-        <Message message={t("message.contents.content1")} showIcon={false} />
         <CodeBlock exampleCode='<Message message="Season sale: Up to 50% off selected items!" showIcon={false} />' />
       </Section>
       <Section
diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json
index 4eade75d1..de0513474 100644
--- a/apps/demo/src/locales/en/ui.json
+++ b/apps/demo/src/locales/en/ui.json
@@ -223,17 +223,6 @@
     }
   },
   "message": {
-    "contents": {
-      "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!",
-      "content5": "Warning: Limited time only! Sale ends soon!",
-      "danger": "Danger message",
-      "info": "Info message",
-      "success": "Success message",
-      "warning": "Warning message"
-    },
     "subtitle": "The Message component displays contextual messages with optional icons and a closable action. It supports custom slots, making it flexible for various use cases.",
     "propertiesDescription": {
       "enableClose": "Displays a close icon if true, allowing the message to be dismissed.",
diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json
index 07f597644..e8c7ceb21 100644
--- a/apps/demo/src/locales/fr/ui.json
+++ b/apps/demo/src/locales/fr/ui.json
@@ -223,17 +223,6 @@
     }
   },
   "message": {
-    "contents": {
-      "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)",
-      "content5": "Warning: Limited time only! Sale ends soon! (fr)",
-      "danger": "Danger message (fr)",
-      "info": "Info message (fr)",
-      "success": "Success message (fr)",
-      "warning": "Warning message (fr)"
-    },
     "subtitle": "The Message component displays contextual messages with optional icons and a closable action. It supports custom slots, making it flexible for various use cases. (fr)",
     "propertiesDescription": {
       "enableClose": "Displays a close icon if true, allowing the message to be dismissed. (fr)",