1  <script lang="ts">
  2    import Drip from '$lib/components/illustrations/drip.svelte';
  3    import ProjectAvatar from '$lib/components/project-avatar/project-avatar.svelte';
  4    import {
  5      getDependenciesStatement,
  6      getDripFill,
  7      SupportButtonStat,
  8      SupportButtonText,
  9      type SupportButtonData,
 10      type SupportButtonOptions,
 11    } from './project-support-button';
 12    import AggregateFiatEstimate from '$lib/components/aggregate-fiat-estimate/aggregate-fiat-estimate.svelte';
 13  
 14    interface Props {
 15      options: SupportButtonOptions;
 16      data: SupportButtonData;
 17    }
 18  
 19    let { options, data }: Props = $props();
 20  
 21    let dripFill = $derived(getDripFill(options));
 22    let dependenciesStatement = $derived(getDependenciesStatement(data?.dependencies));
 23  </script>
 24  
 25  <a
 26    href={data.projectUrl}
 27    class={`support-button support-button--drips support-button--${options.background} support-button--${options.text} support-button--${options.stat}`}
 28  >
 29    <span class="support-button__icon">
 30      <Drip fill={dripFill} />
 31    </span>
 32  
 33    <span class="support-button__text">
 34      {#if options.text === SupportButtonText.me}
 35        Support me
 36      {:else if options.text === SupportButtonText.us}
 37        Support us
 38      {:else if options.text === SupportButtonText.project}
 39        Support <span class="support-button__text__avatar"
 40          ><ProjectAvatar project={data.projectData} size="tiny" /></span
 41        ><strong>{data.projectName}</strong>
 42      {/if}
 43    </span>
 44  
 45    {#if options.stat === SupportButtonStat.support}
 46      <span class="support-button__support"
 47        ><AggregateFiatEstimate
 48          amounts={data.projectData.totalEarned}
 49          prices={data.prices}
 50          supressUnknownAmountsWarning={true}
 51        /></span
 52      >
 53    {:else if options.stat === SupportButtonStat.dependencies}
 54      <span class="support-button__dependencies">{dependenciesStatement}</span>
 55    {/if}
 56  </a>
 57  
 58  <style>
 59    .support-button--drips {
 60      border: 1px solid #28333d;
 61      padding: 0 10px;
 62      border-radius: 1rem 0 1rem 1rem;
 63      display: inline-flex;
 64      gap: 7px;
 65      align-items: center;
 66      height: 32px;
 67      background-color: #ffffff;
 68      color: #28333d;
 69      white-space: nowrap;
 70      font-family: var(--typeface-regular);
 71    }
 72  
 73    .support-button--drips.support-button--dark {
 74      background-color: #28333d;
 75      color: #ffffff;
 76    }
 77  
 78    .support-button--drips.support-button--blue {
 79      background-color: #5555ff;
 80      color: #ffffff;
 81    }
 82  
 83    .support-button__icon {
 84      width: 12px;
 85      display: flex;
 86      align-items: center;
 87    }
 88  
 89    .support-button__text {
 90      display: flex;
 91      gap: 7px;
 92      align-items: center;
 93    }
 94  
 95    .support-button__avatar {
 96      width: 24px;
 97      height: 24px;
 98      border-radius: 100%;
 99    }
100  
101    .support-button__dependencies,
102    .support-button__support {
103      color: #ffffff;
104      font-weight: 600;
105    }
106  
107    .support-button--drips.support-button--light .support-button__dependencies,
108    .support-button--drips.support-button--light .support-button__support {
109      color: #5555ff;
110    }
111  
112    .support-button strong {
113      font-weight: 600;
114    }
115  
116    .support-button__text__avatar {
117      margin-right: -3.5px;
118    }
119  </style>