aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Avatar.svelte
blob: ac2dfddada199ab3fd78b92321e74b8f06240d20 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
	import { avatar, banner, colorTheme } from '$lib/store';
	import { Icon } from '$comp';
	import { punk } from '$lib/utils';

	export let user;
	export let size = 32;
	export let disabled = false;

	$: s = size.toString();
	$: link = user.anon ? `/${user.pubkey}` : `/${user.username}`;

	$: src =
		($avatar?.id && $avatar.id === user.id && $avatar.src) ||
		'/api/public/' +
			(user.profile ? user.id + '-profile.webp' : 'punks/' + punk(user.pubkey || user.id || 'aa'));
</script>

<a href={link} class:pointer-events-none={disabled}>
	<div
		class="w-{s} h-{s} rounded-full border-4 border-white overflow-hidden bg-gradient-to-r {$colorTheme} flex justify-center items-center"
	>
		<img
			{src}
			class="w-full h-full object-cover object-center overflow-hidden"
			alt={user.username}
		/>
	</div>
</a>