1  <script lang="ts">
 2    import InfoCircle from '$lib/components/icons/InfoCircle.svelte';
 3    import Tooltip from '../tooltip/tooltip.svelte';
 4  
 5    interface Props {
 6      title: string;
 7      tooltip: string | undefined;
 8      detail?: import('svelte').Snippet;
 9      value?: import('svelte').Snippet;
10      actions?: import('svelte').Snippet;
11    }
12  
13    let { title, tooltip, detail, value, actions }: Props = $props();
14  </script>
15  
16  <section
17    class="token-stat border rounded-drip-xl pt-3 px-4 pb-3"
18    style="border-color:var(--color-foreground)"
19  >
20    <header class="flex flex-wrap justify-between items-end">
21      <div class="title">
22        <h3 class="typo-text">{title}</h3>
23        {#if tooltip}
24          <Tooltip>
25            <InfoCircle style="height: 1rem;" />
26            {#snippet tooltip_content()}
27              {tooltip}
28            {/snippet}
29          </Tooltip>
30        {/if}
31      </div>
32      <div>
33        {@render detail?.()}
34      </div>
35    </header>
36  
37    <!-- amount -->
38    <div class="mt-10 text-right text-typo-header-1 font-mono font-bold">
39      {@render value?.()}
40    </div>
41  
42    <!-- actions -->
43    <footer class="flex justify-end mt-5 -mr-1">
44      {@render actions?.()}
45    </footer>
46  </section>
47  
48  <style>
49    .title {
50      display: flex;
51      gap: 0.25rem;
52      align-items: center;
53    }
54  </style>