src/components/Popup.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

<script lang="ts">
  import { page } from "$app/stores";
  import Avatar from "$comp/Avatar.svelte";
  let { tags } = $props();

  let addr = (tags) => {
    let { "addr:housenumber": house, "addr:street": street, "addr:city": city } = tags;
    if (house) return `${house} ${street}`;
    return "";
  };
</script>

{#if tags}
  {#if tags.user && tags.user.username}
    <a href={`/${tags.user.username}`}>
      <div class="space-y-5">
        <div>
          <span class="block font-bold">{tags.name}</span>
          <span class="block">{addr(tags)}</span>
        </div>

        <div>
          <div class="flex w-full">
            <div class="mx-auto">
              <Avatar user={tags.user} size={16} />
            </div>
          </div>
          <div class="break-all text-center">
            {$page.url.host}/{tags.user.username.toLowerCase()}
          </div>
        </div>
      </div>
    </a>
  {:else}
    <span class="block font-bold">{tags.name}</span>
    <span class="block">{addr(tags)}</span>
  {/if}
{/if}