before liquid glass

src/components/pnUserListItemBody.vue

@@ -0,0 +1,57 @@
+<template>
+ <q-item-section avatar>
+    <pn-auto-avatar
+      :img="item.photo"
+      :name="item.section1"
+    />
+  </q-item-section>
+  <q-item-section>
+    <slot/>
+    <q-item-label lines="1" v-if="showStatus && getUserStatus(item) && getUserStatus(item)?.status">
+      <q-badge  :color="getUserStatus(item)?.color">
+        {{ $t(getUserStatus(item)?.text ?? '') }}
+      </q-badge>
+    </q-item-label>
+    <q-item-label lines="1" class="text-bold" v-if="item.section1">
+      {{item.section1}}
+    </q-item-label>
+    <q-item-label lines="2" caption v-if="item.section3">
+      {{item.section3}}
+    </q-item-label>
+    <q-item-label caption v-if="item.section2_1 || item.section2_2">
+      <pn-inline-pair
+        :item1="item.section2_1 ? item.section2_1 :null"
+        item1Class="text-bold"
+        item1Icon="telegram"
+        item1IconColor="tgcolor"
+        :item2="item.section2_2 ? '@' + item.section2_2 : null"
+        item2Class="text-blue"
+      />
+    </q-item-label>
+  </q-item-section>
+</template>
+
+<script setup lang="ts">
+  import { getUserStatus } from 'utils/users'
+  import pnInlinePair from 'components/pnInlinePair.vue'
+  import type { User } from 'types/User'
+
+  type UserListItem = User & {
+    section1: string
+    section2_1: string
+    section2_2: string
+    section3: string
+    is_blocked: boolean
+    is_leave: boolean
+    companyName?: string | null
+  }
+
+  defineProps<{
+    item: UserListItem
+    showStatus?: boolean
+  }>()
+
+</script>
+
+<style scoped>
+</style>