alice.pds.demo.boltless.dev
This repository has no description
1<script lang="ts">
2 import UserRound from "$icon/user-round";
3 import { avatarUrl } from "$lib/avatar";
4
5 interface Props {
6 did?: string;
7 src?: string;
8 handle?: string;
9 tiny?: boolean;
10 size?: string;
11 class?: string;
12 }
13
14 let { did, src, handle, tiny = false, size = "size-10", class: className = "" }: Props = $props();
15
16 const source = $derived(src ?? (did ? avatarUrl(did, tiny) : undefined));
17
18 // an unconfigured avatar service 404s, same as a broken image
19 let failed = $state(false);
20
21 $effect(() => {
22 if (source) failed = false;
23 });
24</script>
25
26{#if source && !failed}
27 <img
28 src={source}
29 alt={handle ? `${handle}'s avatar` : "avatar"}
30 class={`${size} shrink-0 rounded-full border border-border-default object-cover ${className}`}
31 onerror={() => (failed = true)}
32 />
33{:else}
34 <span
35 class={`${size} flex shrink-0 items-center justify-center rounded-full border border-border-default bg-background-inset text-foreground-subtle ${className}`}
36 role={handle ? "img" : undefined}
37 aria-label={handle ? `${handle}'s avatar` : undefined}
38 aria-hidden={handle ? undefined : "true"}
39 >
40 <UserRound class="size-1/2" />
41 </span>
42{/if}