change

src/components/pnChatTypeItem.vue

@@ -0,0 +1,45 @@
+<template>
+   <q-item>
+    <q-item-section avatar>
+      <q-avatar 
+        rounded 
+        text-color="white" 
+        :icon="chatType.icon"
+        :color="chatType.color"
+        size="md"
+      />
+    </q-item-section>
+    <q-item-section>
+      <q-item-label>
+        <div class="row no-wrap items-center justify-between">
+          {{ $t(chatType.label) }}
+          <span class="text-caption text-grey" v-if="time">
+            {{ date.formatDate(time * 1000, 'DD MMM YYYY') }}
+          </span>
+        </div>
+      </q-item-label>
+      <q-item-label class="text-grey text-caption">
+        {{ $t(chatType.description) }}
+      </q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { getChatType } from 'utils/chats'
+  import { date } from 'quasar' 
+  import type { ChatType } from 'types/Chat'
+
+  const props = withDefaults(defineProps<{
+    type: ChatType
+    time?: number
+  }>(), {
+    type: 'full'
+  })
+
+  const chatType = computed(() => getChatType(props.type))
+</script>
+
+<style scoped>
+</style>