From 84bef1fad503d8bb83ab7cff1f28ca2e3d0d84f9 Mon Sep 17 00:00:00 2001
From: valere <dev@valerebron.com>
Date: Thu, 10 Oct 2024 16:19:09 +0200
Subject: [PATCH] FEAT: style comments left/right

---
 components/comment/list.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/comment/list.vue b/components/comment/list.vue
index c4c2cca..01b6e1e 100644
--- a/components/comment/list.vue
+++ b/components/comment/list.vue
@@ -1,10 +1,11 @@
 <template>
   <ul>
-    <li v-for="comment in store.orderedComment(props.filmId)" class="m-6">
-      <p class="bg-white p-4 mb-4 rounded-lg">
+    <li v-for="(comment, index) in store.orderedComment(props.filmId)" class="m-6">
+      <p class="bg-white p-4 mb-4 rounded-lg"
+        :class="{ 'rounded-bl-none': isEven(index), 'rounded-br-none': !isEven(index) }">
         {{ comment.message }}
       </p>
-      <p>
+      <p :class="{ 'text-right': !isEven(index) }">
         <UiPerson class="h-10 inline-block" /> {{ comment.username }} -
         {{ useDateFormat(comment.added, 'D MMM YYYY') }}
         {{ comment.score }}%
@@ -18,4 +19,6 @@ import { useDateFormat } from '@vueuse/core'
 
 const props = defineProps(['filmId'])
 const store = useCommentStore()
+
+const isEven = (index) => (index % 2 === 0)
 </script>