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

<script>
  import { t } from "$lib/translations";
  import { fly } from "svelte/transition";

  import Avatar from "$comp/Avatar.svelte";
  import Icon from "$comp/Icon.svelte";

  import { request, requestRedirect } from "$lib/store";
  import { page } from "$app/stores";

  export let user;

  $requestRedirect = $page.url.pathname;
</script>

{#if $request}
  <div class="fixed bottom-0 border-t w-full p-4 bg-white z-50" in:fly>
    <div class="flex flex-wrap md:flex-nowrap max-w-xl mx-auto gap-2">
      <div class="my-auto mx-auto">
        <div class="flex">
          <Avatar user={$request.requester} size={12} />
          <h1 class="my-auto">
            <b>{$request.requester.username}</b>
            {$t("payments.readyToPay")}
          </h1>
        </div>
      </div>
      <div class="mx-auto my-auto flex gap-2">
        <a href={`/${user.username}/receive/${$request.id}`}>
          <button
            class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-32"
          >
            {$t("payments.invoice")}
          </button>
        </a>
      </div>
    </div>
  </div>
{/if}