noctbot/web/src/routes/dashboard/contest/_components/EmojiSelector.svelte

<script>
  export let emojis = [
    ...[...Array(50).keys()].map(i => ({
      id: `${i}`,
      url:
        "https://pbs.twimg.com/profile_images/1094633303196487687/AJ5HL3Tz_400x400.png",
      name: "asd"
    }))
  ];
  export let name = "";

  let selectedEmoji = "";
  function emojiSelected(e) {
    selectedEmoji = e.target.dataset.emojiId;
  }
</script>

<style>
  div.emoji-selector {
    @apply .flex .flex-wrap .bg-gray-800 .py-1 .px-1 .rounded .border .border-gray-900 w-1/3;

    &:focus {
      @apply .border-blue-500 .shadow;
    }

    & > div {
      @apply .rounded .mr-1 .mb-1;

      & > img {
        @apply .w-8 .h-auto;
      }

      &:hover {
        @apply .bg-gray-500;
      }

      &[data-selected="true"] {
        @apply .bg-gray-300;
      }
    }
  }
</style>

<div class="emoji-selector">
  <input required type="hidden" {name} value={selectedEmoji} />
  {#each emojis as emoji (emoji.id)}
    <div title={emoji.name} data-selected={selectedEmoji === emoji.id}>
      <img
        data-emoji-id={emoji.id}
        on:click={emojiSelected}
        alt="Emote {emoji.id}"
        src={emoji.url} />
    </div>
  {/each}
</div>