Render telegram avatars in user cards

This commit is contained in:
Ruslan Bakiev
2026-04-04 10:13:50 +07:00
parent 354e8b1e64
commit a4b3e195c7
4 changed files with 30 additions and 2 deletions

View File

@@ -6,6 +6,7 @@ import {
type ManagerUsersQuery,
type RegistrationRequestsQuery,
} from '~/composables/graphql/generated';
import { messengerConnectionAvatarSrc } from '~/composables/useMessengerConnectionPresentation';
definePageMeta({
middleware: ['manager-only'],
@@ -150,7 +151,16 @@ function userInitials(fullName: string) {
class="surface-card flex min-h-[280px] flex-col rounded-[32px] p-6"
>
<div class="flex justify-center">
<div class="flex h-24 w-24 items-center justify-center rounded-[32px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-3xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]">
<img
v-if="messengerConnectionAvatarSrc(user.telegramConnection)"
:src="messengerConnectionAvatarSrc(user.telegramConnection)"
:alt="user.fullName"
class="h-24 w-24 rounded-[32px] object-cover shadow-[0_12px_30px_rgba(18,56,36,0.14)]"
>
<div
v-else
class="flex h-24 w-24 items-center justify-center rounded-[32px] bg-[linear-gradient(135deg,#dff7e9_0%,#c2ead3_100%)] text-3xl font-black text-[#123824] shadow-[inset_0_1px_0_rgba(255,255,255,0.65)]"
>
{{ userInitials(user.fullName) }}
</div>
</div>