ptr.pet
1<script lang="ts">
2 import type { Did } from '@atcute/lexicons';
3 import ProfilePicture from './ProfilePicture.svelte';
4 import type { AtpClient } from '$lib/at/client.svelte';
5 import { generateColorForDid } from '$lib/accounts';
6
7 interface Props {
8 client: AtpClient;
9 did: Did;
10 reason: 'blocked' | 'blocks-you';
11 size?: 'small' | 'normal' | 'large';
12 }
13
14 let { client, did, reason, size = 'normal' }: Props = $props();
15
16 const color = $derived(generateColorForDid(did));
17 const text = $derived(reason === 'blocked' ? 'user blocked' : 'user blocks you');
18 const pfpSize = $derived(size === 'small' ? 8 : size === 'large' ? 16 : 10);
19</script>
20
21<div
22 class="flex items-center gap-2 rounded-sm border-2 p-2 {size === 'small' ? 'text-sm' : ''}"
23 style="background: {color}11; border-color: {color}44;"
24>
25 <div class="blocked-pfp">
26 <ProfilePicture {client} {did} size={pfpSize} />
27 </div>
28 <span class="opacity-80">{text}</span>
29</div>
30
31<style>
32 .blocked-pfp {
33 filter: blur(8px) grayscale(100%);
34 opacity: 0.4;
35 }
36</style>