ptr.pet
1<script lang="ts">
2 import { generateColorForDid } from '$lib/accounts';
3 import type { AtpClient } from '$lib/at/client';
4 import { isBlob } from '@atcute/lexicons/interfaces';
5 import PfpPlaceholder from './PfpPlaceholder.svelte';
6 import { img } from '$lib/cdn';
7 import type { Did } from '@atcute/lexicons';
8
9 interface Props {
10 client: AtpClient;
11 did: Did;
12 size: number;
13 }
14
15 let { client, did, size }: Props = $props();
16
17 let color = $derived(generateColorForDid(did));
18</script>
19
20{#snippet missingPfp()}
21 <PfpPlaceholder {color} {size} />
22{/snippet}
23
24{#await client.getProfile(did)}
25 {@render missingPfp()}
26{:then profile}
27 {#if profile.ok}
28 {@const record = profile.value}
29 {#if isBlob(record.avatar)}
30 <img
31 class="rounded-sm"
32 style="width: calc(var(--spacing) * {size}); height: calc(var(--spacing) * {size});"
33 alt="avatar for {did}"
34 src={img('avatar_thumbnail', did, record.avatar.ref.$link)}
35 />
36 {:else}
37 {@render missingPfp()}
38 {/if}
39 {:else}
40 {@render missingPfp()}
41 {/if}
42{/await}