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

<script lang="ts">
	import UserIsLogged from "$lib/components/UserIsLogged.svelte";

  export let emoji: string;
  export let count: number;
  export let gallery_id: string;
  export let liked: boolean;
  export let onReact: (emoji: string, id: string, deleted: boolean) => void;

  const handleReaction = async (emoji: string) => {
    await fetch(`/api/community/reaction`, {
      method: "POST",
      body: JSON.stringify({ emoji, gallery_id }),
      headers: {
        "Content-Type": "application/json",
      },
    })
    .then(res => res.json())
    .then(data => {
      onReact(emoji, data.id, data.delete);
    })
  }
</script>

<UserIsLogged>
  <button
    class="rounded-full bg-white text-neutral-800 font-bold flex items-center justify-start gap-1.5 px-3 py-1 border border-white hover:bg-neutral-200 text-sm"
    class:bg-opacity-60={!liked}
    on:click={() => handleReaction(emoji)}
  >
    <span class="text-base">{emoji}</span>
    {count}
  </button>
</UserIsLogged>