# All files / js/components UserInfo.vue

0% Statements 0/9
0% Branches 0/14
0% Functions 0/5
0% Lines 0/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47

     <script setup lang="ts">
    import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
    import { useInitials } from '@/composables/useInitials';
    import type { User } from '@/types';
    import { computed } from 'vue';

    interface Props {
        user: User | null;
        showEmail?: boolean;
    }

    const props = withDefaults(defineProps<Props>(), {
        showEmail: false,
    });

    const { getInitials } = useInitials();

    // Compute whether we should show the avatar image
    const showAvatar = computed(
        () => props.user?.avatar && props.user.avatar !== '',
    );
    </script>

    <template>
        <Avatar v-if="user" class="h-8 w-8 overflow-hidden rounded-lg">
            <AvatarImage v-if="showAvatar" :src="user.avatar!" :alt="user.name" />
            <AvatarFallback class="rounded-lg text-black dark:text-white">
                {{ getInitials(user.name) }}
            </AvatarFallback>
        </Avatar>
        <Avatar v-else class="h-8 w-8 overflow-hidden rounded-lg">
            <AvatarFallback class="rounded-lg text-black dark:text-white">
                ?
            </AvatarFallback>
        </Avatar>

        <div v-if="user" class="grid flex-1 text-left text-sm leading-tight">
            <span class="truncate font-medium">{{ user.name }}</span>
            <span v-if="showEmail" class="truncate text-xs text-muted-foreground">{{
                user.email
            }}</span>
        </div>
        <div v-else class="grid flex-1 text-left text-sm leading-tight">
            <span class="truncate font-medium text-muted-foreground">Guest</span>
        </div>
    </template>