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 src;
17 failed = false;
18 });
19</script>
20
21{#if src && !failed}
22 <img
23 {src}
24 alt={handle ? `${handle}'s avatar` : "avatar"}
25 class={`${size} shrink-0 rounded-full border border-border-default object-cover ${className}`}
26 onerror={() => (failed = true)}
27 />
28{:else}
29 <span
30 class={`${size} flex shrink-0 items-center justify-center rounded-full border border-border-default bg-background-inset text-foreground-subtle ${className}`}
31 role={handle ? "img" : undefined}
32 aria-label={handle ? `${handle}'s avatar` : undefined}
33 aria-hidden={handle ? undefined : "true"}
34 >
35 <UserRound class="size-1/2" />
36 </span>
37{/if}