goose.art
a calm atproto client
1<script>
2 let { emotes } = $props();
3</script>
4
5<div class="emoticons">
6 {#each emotes as emote (emote.id)}
7 <span class="emote">{emote.name}</span>
8 {/each}
9</div>
10
11<style>
12 .emoticons {
13 position: absolute;
14 bottom: -1rem;
15 left: 1rem;
16 width: 100%;
17 }
18 .emote {
19 font-size: 1.25rem;
20 background: var(--sunrise-white);
21 border: 2px solid var(--sunrise-pink);
22 color: var(--sunrise-navy);
23 border-radius: 50%;
24 margin-left: -0.5rem;
25 display: inline-block;
26 width: 2rem;
27 height: 2rem;
28 text-align: center;
29 }
30</style>