39 lines
1.1 KiB
Vue
39 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { profileAvatarSeedFromValue, profileAvatarUrl } from '~/utils/profileAvatars'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
avatarSeed?: string | null
|
|
seed?: string | null
|
|
label?: string | null
|
|
size?: number
|
|
}>(), {
|
|
avatarSeed: '',
|
|
seed: '',
|
|
label: '',
|
|
size: 48,
|
|
})
|
|
|
|
const normalizedSeed = computed(() => {
|
|
const source = props.avatarSeed || props.seed || props.label || 'person'
|
|
return profileAvatarSeedFromValue(source)
|
|
})
|
|
|
|
const avatarSrc = computed(() => profileAvatarUrl(normalizedSeed.value))
|
|
const avatarStyle = computed(() => ({
|
|
width: `${props.size}px`,
|
|
height: `${props.size}px`,
|
|
}))
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[34%] border border-white/80 bg-white shadow-[0_12px_28px_rgba(47,36,24,0.16)]"
|
|
:style="avatarStyle"
|
|
:title="label || undefined"
|
|
role="img"
|
|
:aria-label="label ? `Аватар: ${label}` : 'Аватар'"
|
|
>
|
|
<img :src="avatarSrc" :alt="label || 'Аватар'" class="h-full w-full object-cover" loading="lazy">
|
|
</div>
|
|
</template>
|