src/components/Avatar.svelte


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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<script lang="ts">
  import { avatar, banner } from "$lib/store";
  import { punk } from "$lib/utils";

  interface Props {
    user: any;
    size?: number;
    disabled?: boolean;
  }

  let { user, size = 32, disabled = false }: Props = $props();

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

  let base = "/api/public";
  let profile = $derived(
    user?.profile ? `${base}/${user.profile}.webp` : user?.picture,
  );
  let fallback = $derived(
    `${base}/punks/` + punk(user?.pubkey || user?.id || "aa"),
  );
  let tmp = $derived($avatar?.id && $avatar.id === user?.id && $avatar.src);
  let src = $derived(tmp || profile || fallback);
</script>

{#snippet body()}
  <div
    class="w-{s} h-{s} rounded-full border-4 border-base-100 overflow-hidden bg-gradient-to-r from-primary to-gradient flex justify-center items-center"
  >
    <img
      {src}
      class="w-full h-full object-cover object-center overflow-hidden"
      alt={user?.username}
    />
  </div>
{/snippet}

{#if disabled}
  {@render body()}
{:else if link}
  <a href={link} class:pointer-events-none={disabled}>
    {@render body()}
  </a>
{:else}
  {@render body()}
{/if}