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