[TAS-365] ✨ Add trending NFT in index page

src/components/Async/IndexPageTrendingNFTList.vue

@@ -0,0 +1,104 @@
+<template>
+  <IndexPageTrendingNFTListPlaceholder v-if="!classIds.length" />
+  <div
+    v-else
+    class="index-page-trending-nft-list"
+  >
+    <Swiper
+      ref="swiper"
+      :options="swiperOptions"
+      @slider-move="handleSliderMove"
+    >
+      <SwiperSlide
+        v-for="classId in classIds"
+        :key="classId"
+        class="px-[40px] sm:px-0"
+        style="
+          width: 360px; /* NOTE: Set width in style for auto slide per view calculation */
+        "
+      >
+        <NFTCampaignItem
+          :class-id="classId"
+          :is-single-column="true"
+        />
+      </SwiperSlide>
+    </Swiper>
+
+    <div class="sm:absolute inset-0 pointer-events-none z-10 flex justify-between sm:items-center p-[0.5rem] laptop:px-[48px]">
+      <ButtonV2
+        class="relative shadow-lg pointer-events-auto scale-75 sm:scale-100"
+        preset="tertiary"
+        :circle="true"
+        size="small"
+        @click="handleClickPrev"
+      >
+        <IconArrowLeft class="w-[20px]" />
+      </ButtonV2>
+      <ButtonV2
+        class="relative shadow-lg pointer-events-auto scale-75 sm:scale-100"
+        preset="tertiary"
+        :circle="true"
+        size="small"
+        @click="handleClickNext"
+      >
+        <IconArrowLeft class="w-[20px] rotate-180" />
+      </ButtonV2>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
+
+export default {
+  name: 'IndexPageTrendingNFTList',
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  props: {
+    classIds: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    swiperOptions() {
+      return {
+        slidesPerView: 'auto',
+        spaceBetween: 40,
+        centeredSlides: true,
+        breakpoints: {
+          1024: {
+            centeredSlides: false,
+          },
+        },
+      };
+    },
+    swiper() {
+      return this.$refs.swiper?.$swiper;
+    },
+  },
+  methods: {
+    handleClickPrev() {
+      this.$emit('slide-prev');
+      this.swiper.slidePrev();
+    },
+    handleClickNext() {
+      this.$emit('slide-next');
+      this.swiper.slideNext();
+    },
+    handleSliderMove() {
+      this.$emit('slider-move');
+    },
+  },
+};
+</script>
+<style lang="scss">
+@import 'swiper/swiper.scss';
+
+/* Override swiper styles for this component */
+.index-page-trending-nft-list .swiper-container {
+  overflow: unset;
+}
+</style>

src/components/IndexPageTrendingNFTListPlaceholder.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="px-[32px] min-h-[414px]">
+    <ul
+      :class="[
+        'absolute',
+        'flex',
+        'gap-[40px]',
+        'min-h-[inherit]',
+      ]"
+    >
+      <li
+        v-for="index in 4"
+        :key="`placeholder-${index}`"
+        :class="[
+          'flex',
+          'flex-col',
+          'min-w-[360px]',
+          'animate-pulse',
+        ]"
+      >
+        <div class="bg-shade-gray rounded-[14px] grow" />
+        <div class="bg-shade-gray rounded-[8px] h-[32px] w-[70%] mt-[8px]" />
+        <div class="flex justify-between mt-[16px]">
+          <ul class="grid grid-flow-col gap-[8px]">
+            <li
+              v-for="j in 2"
+              :key="`placeholder-${j}`"
+            >
+              <div class="bg-shade-gray rounded-[4px] h-[36px] w-[44px]" />
+              <div class="bg-shade-gray rounded-[4px] h-[18px] w-[64px] mt-[4px]" />
+            </li>
+          </ul>
+          <div class="bg-shade-gray rounded-[8px] w-[88px] h-[44px]" />
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>

src/components/NFTCampaign/Item.vue

@@ -36,6 +36,7 @@
         to: nftCollectRoute,
         tag: 'NuxtLink',
       }"
+      :is-single-column="isSingleColumn"
       @view-details="handleClickViewDetails"
       @view-content="handleClickViewContent"
       @collect="handleClickCollect"
@@ -67,6 +68,10 @@ export default {
       type: String,
       default: '',
     },
+    isSingleColumn: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {

src/components/NFTCampaign/ItemBase.vue

@@ -1,24 +1,33 @@
 <template>
   <div>
     <header
+      v-if="!isSingleColumn"
       v-t="isCollectable ? 'campaign_nft_item_header_hint' : 'campaign_nft_item_header_hint_uncollectable'"
-      class="text-black text-[12px] leading-[5/3]"
+      class="text-black text-[12px] leading-[5/3] mb-[8px]"
     />
-    <div class="mt-[8px] grid laptop:grid-cols-2 grid-cols-row gap-[16px]">
+    <div
+      :class="[
+        { 'grid': !isSingleColumn },
+        'laptop:grid-cols-2',
+        'grid-cols-row',
+        'gap-[16px]',
+      ]"
+    >
       <div :class="{ 'order-2': !!storyTitle }">
         <NFTWidgetBaseCard class="flex flex-col items-center w-full">
           <NFTWidgetContentPreview
             :class="[
               hoverClass,
               'transition-shadow',
               'cursor-pointer',
-              'min-h-[300px]',
               'w-full',
+              { 'min-h-[300px]': !isSingleColumn },
             ]"
             :title="title"
             :description="description"
             :img-src="imgSrc"
             :img-bg-color="imgBgColor"
+            :is-fixed-height="isSingleColumn"
             v-bind="contentPreviewProps"
             @click="handleClickNFTDetails"
           />
@@ -73,7 +82,7 @@
           </NuxtLink>
         </template>
         <NFTSupplyTable
-          v-else
+          v-else-if="!isSingleColumn"
           class="w-full laptop:mt-[8px] laptop:pr-[8px]"
           :sold-count="soldCount"
           :base-price="basePrice"
@@ -107,11 +116,11 @@
             </li>
           </ul>
           <ProgressIndicator v-if="isLoading" />
-          <CollectButton 
-            v-else-if="isCollectable" 
+          <CollectButton
+            v-else-if="isCollectable"
             :button-text="$t('nft_widget_button_collect')"
             :is-collectable="isCollectable"
-            :collect-expiry-time="collectExpiryTime" 
+            :collect-expiry-time="collectExpiryTime"
             @click-collect-button="handleClickCollect"
           />
         </div>
@@ -245,6 +254,11 @@ export default {
       type: String,
       default: '',
     },
+
+    isSingleColumn: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     hoverClass() {

src/components/NFTCover.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="flex items-stretch shrink-0 w-min">
     <div
-      class="relative bg-gray-9b w-full"
+      :class="[
+        'relative',
+        'bg-gray-9b',
+        'w-full',
+        { 'aspect-[1200/630]': isFixedHeight },
+      ]"
       :style="rootStyle"
     >
       <video
@@ -58,6 +63,10 @@ export default {
       type: Number,
       default: 720,
     },
+    isFixedHeight: {
+      type: Boolean,
+      default: false,
+    },
     bgColor: {
       type: String,
       default: '',
@@ -116,6 +125,7 @@ export default {
         {
           'animate-pulse': !this.isLoaded,
           'h-[290px] w-[204px]': this.isNftBook,
+          'aspect-[inherit]': !this.isNftBook && this.isFixedHeight,
         },
       ];
     },

src/components/NFTWidget/ContentPreview.vue

@@ -6,17 +6,29 @@
     @click="handleClick"
   >
     <NFTCover
-      v-if="imgSrc"
-      class="grow"
       :src="imgSrc"
       :size="450"
+      :is-fixed-height="isFixedHeight"
       :alt="title"
     />
-    <div class="p-[16px] shrink-0">
-      <div class="text-[16px] leading-[1.25] font-[600] line-clamp-2">{{ title }}</div>
-      <div class="text-[16px] leading-[1.25] font-[400] mt-[4px] line-clamp-4">
-        {{ description }}
-      </div>
+    <div class="p-[16px] grow min-h-[76px]">
+      <div
+        :class="[
+          'text-[16px]',
+          'leading-[1.25]',
+          'font-[600]',
+          isFixedHeight ? 'line-clamp-1' : 'line-clamp-2',
+        ]"
+      >{{ title }}</div>
+      <div
+        :class="[
+          'text-[16px]',
+          'leading-[1.25]',
+          'font-[400]',
+          'mt-[4px]',
+          isFixedHeight ? 'line-clamp-1' : 'line-clamp-4',
+        ]"
+      >{{ description }}</div>
     </div>
   </component>
 </template>
@@ -44,6 +56,10 @@ export default {
       type: String,
       default: 'div',
     },
+    isFixedHeight: {
+      type: Boolean,
+      default: false,
+    },
   },
   methods: {
     handleClick(event) {

src/constant/index.js

@@ -203,6 +203,9 @@ export const NFT_DISPLAY_STATE = {
   DEFAULT: 'default',
 };
 
+export const NFT_CLASS_LATEST_DISPLAY_COUNT = 10;
+export const NFT_CLASS_TRENDING_LIMIT_PER_OWNER = 2;
+
 // NOTE: Limitation of LikeCoin API for batch collect
 export const BATCH_COLLECT_MAX = 100;
 

src/nuxt.config.js

@@ -283,7 +283,7 @@ const nuxtConfig = {
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
-  components: true,
+  components: [{ path: '~/components', ignore: ['~/components/Async/**.*'] }],
 
   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
   buildModules: [