From 1fc4445bbaa8039f1e1fc0d20d496b8270146a34 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 2 Dec 2024 17:58:05 +0530
Subject: [PATCH] feat: better stories

---
 .../message/EmailMessages.story.vue           | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/EmailMessages.story.vue b/app/javascript/dashboard/components-next/message/EmailMessages.story.vue
index 511ef5dad..9f687b4fa 100644
--- a/app/javascript/dashboard/components-next/message/EmailMessages.story.vue
+++ b/app/javascript/dashboard/components-next/message/EmailMessages.story.vue
@@ -2,16 +2,27 @@
 import Message from './Message.vue';
 
 import simpleEmail from './fixtures/simpleEmail.js';
-
-const messages = simpleEmail;
+import newsletterEmail from './fixtures/newsletterEmail.js';
 </script>
 
 <template>
-  <Story title="Components/Messages/Email" :layout="{ type: 'single' }">
-    <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
-      <template v-for="message in messages" :key="message.id">
-        <Message :current-user-id="1" is-email-inbox v-bind="message" />
-      </template>
-    </div>
+  <Story
+    title="Components/Messages/Email"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Simple Email">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <template v-for="message in simpleEmail" :key="message.id">
+          <Message :current-user-id="1" is-email-inbox v-bind="message" />
+        </template>
+      </div>
+    </Variant>
+    <Variant title="Newsletter">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-5xl grid">
+        <template v-for="message in newsletterEmail" :key="message.id">
+          <Message :current-user-id="1" is-email-inbox v-bind="message" />
+        </template>
+      </div>
+    </Variant>
   </Story>
 </template>