LeagueStats/client/src/components/Match/MatchItems.vue

<template>
  <div :class="oneRow ? 'ml-2 items-center' : 'items-2-rows flex-wrap'" class="flex">
    <Dropdown v-for="(item, index) in items" :key="index">
      <template v-slot:trigger>
        <div
          :style="{backgroundImage: item ? `url('${item.image}')` : null}"
          :class="[oneRow ? 'ml-2px w-6 h-6' : 'ml-1 w-8 h-8', {'cursor-pointer': item !== null}]"
          class="rounded-md bg-blue-1000 bg-center bg-cover"
        ></div>
      </template>
      <template v-if="item !== null" v-slot:default>
        <div class="flex max-w-md p-2 text-white text-left text-xs select-none">
          <div
            :style="{backgroundImage: item ? `url('${item.image}')` : null}"
            class="ml-1 w-12 h-12 flex-shrink-0 rounded-md bg-blue-1000 bg-center bg-cover"
          ></div>
          <div class="ml-2 leading-none">
            <div class="text-base">{{ item.name }}</div>
            <div class="mt-1">
              <span class="text-blue-200">Price:</span>
              <span class="ml-1 text-sm text-yellow-500 font-semibold">{{ item.price }}</span>
            </div>
            <div v-html="item.description" class="mt-1 item-description text-blue-200 font-light"></div>
          </div>
        </div>
      </template>
    </Dropdown>
  </div>
</template>

<script>
import Dropdown from '@/components/Dropdown.vue'

export default {
  components: {
    Dropdown
  },

  props: {
    oneRow: {
      type: Boolean,
      default: false
    },
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.items-2-rows {
  width: 7rem;
  height: 4.5rem;
}

.item-description >>> stats {
  color: #fff;
  line-height: 1.25;
}

.item-description >>> br + br {
  display: none;
}

.item-description >>> stats br {
  display: block;
}

.item-description >>> unique,
.item-description >>> passive,
.item-description >>> active {
  color: #fff;
  font-weight: bold;
  display: block;
  margin-top: 0.5rem;
}

.item-description >>> font {
  color: #63b3ed;
}
</style>