1  <script lang="ts">
 2    import IconButton from "@app/components/IconButton.svelte";
 3    import Icon from "@app/components/Icon.svelte";
 4    import KeyHint from "@app/components/KeyHint.svelte";
 5    import Popover from "@app/components/Popover.svelte";
 6    import Settings from "./Settings.svelte";
 7  </script>
 8  
 9  <style>
10    .footer {
11      display: flex;
12      align-items: center;
13      justify-content: space-between;
14      font-size: var(--font-size-small);
15      color: var(--color-foreground-dim);
16      height: 2.3125rem;
17      background-color: var(--color-background-dip);
18      padding: 0 1rem;
19    }
20  
21    .left {
22      display: flex;
23      align-items: center;
24      gap: 0.5rem;
25    }
26  
27    .right {
28      display: flex;
29      gap: 1.5rem;
30    }
31  
32    a {
33      display: flex;
34    }
35  
36    a:hover {
37      color: var(--color-fill-secondary);
38    }
39  </style>
40  
41  <div class="footer">
42    <div class="left">
43      <Popover popoverPositionBottom="3rem" popoverPositionLeft="0">
44        <IconButton slot="toggle" let:toggle on:click={toggle}>
45          <Icon name="settings" />
46          Settings
47        </IconButton>
48  
49        <Settings slot="popover" />
50      </Popover>
51    </div>
52  
53    <div class="center">
54      Press <KeyHint>?</KeyHint>
55      for keyboard shortcuts
56    </div>
57    <div class="right">
58      <a
59        style:display="flex"
60        style:align-items="center"
61        style:gap="0.25rem"
62        target="_blank"
63        rel="noreferrer"
64        href="https://radicle.xyz">
65        radicle.xyz
66        <Icon name="arrow-box-up-right" />
67      </a>
68    </div>
69  </div>