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</script>
13
14{#if src}
15 <img
16 {src}
17 alt={handle ? `${handle}'s avatar` : 'avatar'}
18 class={`${size} shrink-0 rounded-full border border-border object-cover ${className}`}
19 />
20{:else}
21 <span
22 class={`${size} flex shrink-0 items-center justify-center rounded-full border border-border bg-surface-muted text-fg-subtle ${className}`}
23 aria-hidden="true"
24 >
25 <UserRound class="size-1/2" />
26 </span>
27{/if}