refactor: user avatar (#19121)

This commit is contained in:
Jason Rasmussen 2025-06-11 15:08:11 -04:00 committed by GitHub
parent 7a001d27a5
commit 38ad15af4c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 11 additions and 24 deletions

View file

@ -155,7 +155,7 @@
title={`${$user.name} (${$user.email})`}
>
{#key $user}
<UserAvatar user={$user} size="md" showTitle={false} interactive />
<UserAvatar user={$user} size="md" noTitle interactive />
{/key}
</button>

View file

@ -18,25 +18,13 @@
interface Props {
user: User;
color?: UserAvatarColor | undefined;
size?: Size;
rounded?: boolean;
interactive?: boolean;
showTitle?: boolean;
showProfileImage?: boolean;
noTitle?: boolean;
label?: string | undefined;
}
let {
user,
color = undefined,
size = 'full',
rounded = true,
interactive = false,
showTitle = true,
showProfileImage = true,
label = undefined,
}: Props = $props();
let { user, size = 'full', interactive = false, noTitle = false, label = undefined }: Props = $props();
let img: HTMLImageElement | undefined = $state();
let showFallback = $state(true);
@ -79,7 +67,7 @@
}
});
let colorClass = $derived(colorClasses[color || user.avatarColor]);
let colorClass = $derived(colorClasses[user.avatarColor]);
let sizeClass = $derived(sizeClasses[size]);
let title = $derived(label ?? `${user.name} (${user.email})`);
let interactiveClass = $derived(
@ -90,11 +78,10 @@
</script>
<figure
class="{sizeClass} {colorClass} {interactiveClass} overflow-hidden shadow-md"
class:rounded-full={rounded}
title={showTitle ? title : undefined}
class="{sizeClass} {colorClass} {interactiveClass} overflow-hidden shadow-md rounded-full"
title={noTitle ? undefined : title}
>
{#if showProfileImage && user.profileImagePath}
{#if user.profileImagePath}
<img
bind:this={img}
src={getProfileImageUrl(user)}