FEAT: style comments left/right

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>