Current User Avatar

1<script setup lang="ts">
2import { computed } from 'vue'
3// @ts-ignore
4import { useCurrentUserImage } from '@/composables/useCurrentUserImage'
5// @ts-ignore
6import { useCurrentUserName } from '@/composables/useCurrentUserName'
7 
8import Avatar from '@/components/ui/avatar/Avatar.vue'
9import AvatarFallback from '@/components/ui/avatar/AvatarFallback.vue'
10import AvatarImage from '@/components/ui/avatar/AvatarImage.vue'
11 
12const { image: profileImage } = useCurrentUserImage()
13const { name } = useCurrentUserName()
14 
15const initials = computed(() => {
16  if (!name.value) return ''
17  return name.value
18    .split(' ')
19    .map(word => word[0])
20    .join('')
21    .toUpperCase()
22})
23</script>
24 
25<template>
26  <Avatar>
27    <AvatarImage
28      v-if="profileImage"
29      :src="profileImage"
30      :alt="initials"
31    />
32    <AvatarFallback>
33      {{ initials }}
34    </AvatarFallback>
35  </Avatar>
36</template>