wip

src/components/Messages/ChatMessageTextExample.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="d-flex mb-4 ga-2">
+    <v-avatar size="36" class="" color="blue-lighten-4">
+      <span class="text-blue-darken-2">А</span>
+    </v-avatar>
+    <div class="message-wrapper">
+      <div class="d-flex align-center ga-2">
+        <span class="text-subtitle-2 font-weight-medium">Анна</span>
+        <span class="text-caption text-disabled">10:30</span>
+      </div>
+      <v-card class="pa-4" rounded="lg" flat>
+        <span>Привет! Как дела? Что нового?</span>
+      </v-card>
+    </div>
+  </div>
+
+  <div class="d-flex mb-4 ga-2">
+    <v-avatar size="36" color="deep-purple-lighten-4">
+      <span class="text-deep-purple-darken-2">М</span>
+    </v-avatar>
+    <div class="message-wrapper">
+      <div class="d-flex align-center ga-2">
+        <span class="text-subtitle-2 font-weight-medium">Максим</span>
+        <span class="text-caption text-disabled">10:30</span>
+      </div>
+      <v-card class="pa-4" rounded="lg" flat>
+        <span>
+          Всем привет! Смотрели новый фильм? Там такие спецэффекты, просто космос! Очень советую
+          сходить в кино.
+        </span>
+      </v-card>
+    </div>
+  </div>
+
+  <div class="d-flex mb-4 ga-2 flex-row-reverse">
+    <v-avatar size="36" color="primary">
+      <span class="text-white">Я</span>
+    </v-avatar>
+    <div style="align-items: flex-end">
+      <div class="d-flex align-center flex-row-reverse ga-2">
+        <span class="text-caption text-disabled">10:35</span>
+        <span class="text-subtitle-2 font-weight-medium">Вы</span>
+      </div>
+      <v-card class="pa-4" rounded="lg" flat color="primary">
+        <span class="text-white"
+          >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
+          has been the industry's standard dummy text ever since the 1500s, when an unknown printer
+          took a galley of type and scrambled it to make a type specimen book.</span
+        >
+      </v-card>
+    </div>
+  </div>
+
+  <div class="d-flex mb-4 ga-2">
+    <v-avatar size="36" color="orange-lighten-4">
+      <span class="text-orange-darken-2">К</span>
+    </v-avatar>
+    <div class="message-wrapper">
+      <div class="d-flex align-center ga-2">
+        <span class="text-subtitle-2 font-weight-medium">Катя</span>
+        <span class="text-caption text-disabled">10:40</span>
+      </div>
+      <v-card class="message-bubble friend-message pa-4" rounded="lg" flat>
+        <span>Смотрите какой милый котик</span>
+        <v-img
+          src="https://cdn.vuetifyjs.com/images/cards/kitchen.png"
+          max-width="200"
+          class="mt-2 rounded"
+        ></v-img>
+      </v-card>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>