FeaturedGallery.vue

<template>
  <section
    id="featured-gallery"
    class="q-my-lg"
  >
    <div class="text-uppercase text-grey-9 text-h6 text-left q-ml-md">
      Most downloaded
    </div>

    <div v-if="items && items.length > 0">
      <div class="row">
        <div
          v-for="project in items"
          :key="project['id']"
          class="col-12 col-sm-6 col-md-4"
        >
          <ProjectThumb
            :project="project"
            @clickProject="handleClickProject"
          />
        </div>
      </div>
      <div class="row">
        <div class="col-12 text-center">
          <q-btn
            class="text-grey-5"
            flat
          >
            Browse all designs
          </q-btn>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="row">
        <div class="col-12 text-h6 text-grey q-ml-md">
          Loading...
        </div>
        <div class="col-12 q-ml-md">
          <q-spinner-dots size="32px" />
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import ProjectThumb from 'src/components/project/ProjectThumb';
export default {
  // name: 'ComponentName',
  props: ['items'],
  components: {
    ProjectThumb
  },
  methods: {
    handleClickProject (key) {
      this.$router.push('/projects/' + key);
    }
  },
  data () {
    return {};
  }
};
</script>