A downstream fork of Tranquil PDS for use in margin.cafe margin.cafe
Something went wrong. Try again.
1.2 kB · 27 lines
Svelte
at main
12345678910111213141516171819202122232425262728<script lang="ts"> import { loadActorProfile, type ActorProfile } from '../../public/actor-profile.js' let { did, handle, size = 32 }: { did: string; handle: string; size?: number } = $props() let profile = $state<ActorProfile>({}) let failed = $state(false) $effect(() => { const accountDid = did let active = true profile = {} failed = false loadActorProfile(accountDid).then(value => { if (active) profile = value }) return () => { active = false } })</script>
<span class="profile-avatar" style:width={`${size}px`} style:height={`${size}px`} aria-hidden="true"> {#if profile.avatarUrl && !failed} <img src={profile.avatarUrl} alt="" width={size} height={size} decoding="async" onerror={() => failed = true} /> {:else} <span>{(profile.displayName || handle).slice(0, 1).toUpperCase()}</span> {/if}</span>
<style> .profile-avatar { display: inline-grid; place-items: center; flex-shrink: 0; overflow: hidden; border-radius: 50%; background: var(--accent-muted); color: var(--accent-ink, var(--text-primary)); font-weight: 600; font-size: 1rem; } img { display: block; width: 100%; height: 100%; object-fit: cover; }</style>