33 lines
870 B
Vue
33 lines
870 B
Vue
<script setup lang="ts">
|
|
import { Avatar } from '@/components/ui/avatar';
|
|
import type { User } from '@/types';
|
|
|
|
type Props = {
|
|
user: User;
|
|
showEmail?: boolean;
|
|
avatarClass?: string;
|
|
fallbackClass?: string;
|
|
};
|
|
|
|
withDefaults(defineProps<Props>(), {
|
|
showEmail: false,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Avatar
|
|
:src="user.photo_url"
|
|
:name="user.name"
|
|
:class="['h-8 w-8 rounded-md border-2 border-foreground', avatarClass]"
|
|
:fallback-class="
|
|
fallbackClass ?? 'bg-violet-100 text-violet-700 font-bold'
|
|
"
|
|
/>
|
|
|
|
<div class="grid flex-1 text-left text-sm leading-tight">
|
|
<span class="truncate font-bold text-foreground">{{ user.name }}</span>
|
|
<span v-if="showEmail" class="truncate text-xs font-medium text-foreground/60">{{
|
|
user.email
|
|
}}</span>
|
|
</div>
|
|
</template>
|