Product listing

Now that the category menu is completed, continue by implementing the product listing using the same tools as depicted in this diagram by completing the following steps:

1. Implement the ProductCard component:
   1. Create the file /src/components/market/ProductCard.vue
   2. Write the following code:

<template>
  <div class="item-card">
    <div class="item-card-content-container">
        <img class="item-card-content-container-img" :src="primaryImageSrc" />
        <span class="item-card-content-container-title">{{product.title}}</span>
        <span class="item-card-content-container-text">
          {{product.description}}
        </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductCard',
  props: {
    product: Object,
  },
  computed: {
    primaryImageSrc: function() {
      return this.product && this.product.media && this.product.media.length > 0
        ? this...