41 lines
1.3 KiB
Vue
41 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import type { AuthUser } from '#shared/types/auth';
|
|
|
|
const session = useAuthSession();
|
|
const { user } = defineProps<{
|
|
user: AuthUser;
|
|
}>();
|
|
|
|
// TODO: Remove once this is a field on the users
|
|
const AVATAR =
|
|
'https://cdn.discordapp.com/avatars/285424924049276939/0368b00056c416cae689ab1434c0aac0.webp';
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="group/user bg-accent/30 flex flex-row items-center justify-between gap-4 overflow-hidden rounded-lg p-2 pl-3"
|
|
>
|
|
<Avatar>
|
|
<AvatarImage :src="AVATAR" />
|
|
</Avatar>
|
|
<div class="flex min-w-0 shrink grow flex-col leading-4">
|
|
<span class="truncate text-sm font-medium">
|
|
{{ user.name }}
|
|
<span
|
|
v-if="user.id === session?.user.id"
|
|
class="text-muted-foreground font-normal"
|
|
>(You)</span
|
|
>
|
|
</span>
|
|
<span class="text-muted-foreground truncate text-xs">{{
|
|
user.email
|
|
}}</span>
|
|
</div>
|
|
<div
|
|
class="flex justify-end transition-all not-pointer-coarse:opacity-0 not-pointer-coarse:group-hover/user:opacity-100"
|
|
>
|
|
<slot name="actions" />
|
|
</div>
|
|
</div>
|
|
</template>
|