gamebrary/src/components/Game/AmazonLinks.vue

<template lang="html">
  <div>
    <b-button
      v-b-modal="modalId"
      variant="warning"
      class="mb-3"
      v-if="amazonLinks.length"
    >
      <i class="fab fa-amazon fa-fw" aria-hidden />
      Available on Amazon
    </b-button>

    <b-modal
      :id="modalId"
      hide-footer
    >
      <template v-slot:modal-header="{ close }">
        <modal-header
          :title="`Find ${game.name} on Amazon`"
          @close="close"
        />
      </template>

      <b-alert show variant="success">
        Support Gamebrary by using these affiliate links to purchase games from Amazon.
      </b-alert>

      <a
        v-if="link.uid && link.url"
        v-for="link in amazonLinks"
        :key="link.url"
        :href="`https://amazon.com/dp/${link.uid}?tag=gamebrary0e-20`"
        target="_blank"
        class="mr-2 mb-2"
      >
        <b-img
          :src="`http://images.amazon.com/images/P/${link.uid}.01._SCMZZZZZZZ_.jpg`"
          thumbnail
        />
      </a>
    </b-modal>
  </div>
</template>

<script>
export default {
  props: {
    game: Object,
    modalId: {
      type: String,
      default: 'amazon',
    },
  },

  computed: {
    amazonLinks() {
      return this.game && this.game.external_games
        ? this.game.external_games.filter(({ category }) => category === 20)
        : [];
    },
  },
};
</script>