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

<script lang="ts">
	import type { ReactionType } from "$lib/type";
  import Reaction from "$lib/components/community/reactions/Reaction.svelte";

  export let reactions: ReactionType[] = [];

  const groupReactionsByEmoji = (reactions: ReactionType[]) => {
    const grouped = new Set(reactions.map((reaction) => reaction.emoji));
    return Array.from(grouped).map((emoji) => {
      return {
        emoji,
        count: reactions.filter((reaction) => reaction.emoji === emoji).length,
      };
    });
  };

  const groupedReactions = groupReactionsByEmoji(reactions);
</script>

{#each groupedReactions as reaction}
  <Reaction emoji={reaction.emoji} count={reaction?.count} />
{/each}