src/lib/components/community/reactions/Add.svelte

<script lang="ts">
  import { browser } from '$app/environment';
	import Icon from "@iconify/svelte";
  import { REACTION_EMOJIS } from "$lib/utils";

  let isOpen: boolean = false;
  $: uuid = Math.random().toString(36).substring(7);

  const handleClick = (event: MouseEvent) => {
    const target = event.target as HTMLElement;
    const addReaction = document.getElementById(uuid);
    if (!addReaction) return;

    if (!addReaction.contains(target)) {
      isOpen = false;
    }
  }
  if (browser) {
    window.addEventListener("click", handleClick);
  }
</script>

<div
  id="{uuid}"  
  class="rounded-full text-sm text-white/80 hover:text-white font-bold flex items-center justify-start gap-1.5 px-1.5 py-1 border border-dashed border-white/80 hover:border-white relative z-[2]"
  class:!border-white={isOpen}
  class:!text-white={isOpen}
>
  <button on:click={() => isOpen = !isOpen}>
    <Icon icon="fluent:emoji-add-16-regular" class="w-5 h-5" />
  </button>
  <div
    class="opacity-0 pointer-events-none absolute left-0 top-0 max-w-max flex items-center justify-center bg-white px-4 py-1 rounded-full gap-0 text-2xl -translate-y-[calc(100%+8px)] -translate-x-1/2"
    class:opacity-100={isOpen}
    class:pointer-events-auto={isOpen}
  >
    {#each REACTION_EMOJIS as emoji}
      <div class="w-9 h-9 hover:bg-neutral-200 rounded-full text-center flex items-center justify-center">{emoji}</div>
    {/each}
  </div>
</div>