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

<script lang="ts">
  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/${gallery_id}/reaction`, {
      method: "POST",
      body: JSON.stringify({ emoji }),
      headers: {
        "Content-Type": "application/json",
      },
    })
    .then(res => res.json())
    .then(data => {
      onReact(emoji, data.id, data.delete);
    })
  }
</script>

<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={(e) => {
    e.preventDefault();
    e.stopPropagation();
    handleReaction(emoji)
  }}
>
  <span class="text-base">{emoji}</span>
  {count}
</button>