refactor: use nuxt carousel

app.config.ts

@@ -0,0 +1,17 @@
+export default defineAppConfig({
+  ui: {
+    carousel: {
+      item: 'snap-start',
+      default: {
+        prevButton: {
+          class: 'absolute top-1/2 -translate-y-1/2 -left-6 bg-white size-14 rounded-full hidden lg:flex disabled:hidden items-center justify-center border-black border shadow-[4px_4px] text-4xl text-black dark:text-white hover:bg-k-primary-light',
+          icon: 'i-heroicons-chevron-left',
+        },
+        nextButton: {
+          class: 'absolute top-1/2 -translate-y-1/2 -right-6 bg-white size-14 rounded-full hidden lg:flex disabled:hidden items-center justify-center border-black border shadow-[4px_4px] text-4xl text-black dark:text-white hover:bg-k-primary-light',
+          icon: 'i-heroicons-chevron-right',
+        },
+      },
+    },
+  },
+})

components/carousel/CarouselTypeDrops.vue

@@ -1,58 +1,31 @@
 <template>
-  <div ref="container">
-    <template v-if="isDynamicGridReady">
-      <CarouselModuleCarouselAgnostic
-        v-if="isReady && dropsAlias"
-        :key="dropsAlias.join('-')"
-        v-slot="{ item }"
-        :items="drops"
-        :config="config"
-      >
-        <DropsDropItem
-          :drop="item"
-          :show-minted="true"
-        />
-      </CarouselModuleCarouselAgnostic>
-      <CarouselModuleCarouselAgnostic
-        v-else
-        :items="Array(skeletonCount).fill({ id: 'drop-skeleton' })"
-        :config="config"
-      >
-        <DropsDropCardSkeleton />
-      </CarouselModuleCarouselAgnostic>
-    </template>
-  </div>
+  <UCarousel
+    v-slot="{ item }"
+    :items="drops"
+    arrows
+  >
+    <div class="w-80 lg:w-96 pr-4">
+      <DropsDropItem
+        :drop="item"
+        :show-minted="true"
+      />
+    </div>
+  </UCarousel>
 </template>
 
 <script lang="ts" setup>
 import { useQuery } from '@tanstack/vue-query'
 import { dropsVisible } from '@/utils/config/permission.config'
 import { getDrops } from '@/services/fxart'
 
-const container = ref()
-const { cols, isReady: isDynamicGridReady } = useDynamicGrid({
-  container,
-  itemMintWidth: computed(() => DROP_CARD_MIN_WIDTH),
-})
-
-const perView = computed(() => (cols.value === 1 ? 1.2 : cols.value))
-const config = computed(() => ({
-  slides: { perView: perView.value, spacing: 16 },
-}))
-const skeletonCount = computed(() =>
-  Number.isInteger(perView.value) ? perView.value : Math.ceil(perView.value),
-)
-
 const { urlPrefix } = usePrefix()
 
-const { data: drops, isSuccess: isReady } = useQuery({
+const { data: drops } = useQuery({
   queryKey: ['drop-items-carousel', urlPrefix.value],
   queryFn: () => getDrops({
     active: [true],
     chain: dropsVisible(urlPrefix.value) ? [urlPrefix.value] : ['base', 'ahp'],
     limit: 14,
   }),
 })
-
-const dropsAlias = computed(() => drops.value?.map(drop => drop.alias))
 </script>

nuxt.config.ts

@@ -74,6 +74,7 @@ export default defineNuxtConfig({
               'date-fns/format',
               'date-fns/formatDistanceToNow',
               'keen-slider/vue',
+              '@kodadot1/hyperdata',
               'lodash/camelCase',
               'lodash/chunk',
               'lodash/filter',
@@ -445,7 +446,7 @@ export default defineNuxtConfig({
   // privateRuntimeConfig: {}
 
   devtools: {
-    enabled: true,
+    enabled: false,
   },
 
   compatibilityDate: '2024-07-11',

package.json

@@ -115,6 +115,7 @@
   "devDependencies": {
     "@0no-co/graphqlsp": "^1.12.14",
     "@dargmuesli/nuxt-cookie-control": "^7.5.1",
+    "@iconify-json/heroicons": "^1.2.2",
     "@nuxt/content": "^2.13.2",
     "@nuxt/eslint": "^0.3.13",
     "@nuxt/types": "^2.18.1",

pages/ui-playground.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const items = [
+  'https://picsum.photos/600/800?random=1',
+  'https://picsum.photos/600/800?random=2',
+  'https://picsum.photos/600/800?random=3',
+  'https://picsum.photos/600/800?random=4',
+  'https://picsum.photos/600/800?random=5',
+  'https://picsum.photos/600/800?random=6',
+  'https://picsum.photos/600/800?random=7',
+  'https://picsum.photos/600/800?random=8',
+  'https://picsum.photos/600/800?random=9',
+  'https://picsum.photos/600/800?random=10',
+  'https://picsum.photos/600/800?random=11',
+  'https://picsum.photos/600/800?random=12',
+  'https://picsum.photos/600/800?random=13',
+  'https://picsum.photos/600/800?random=14',
+  'https://picsum.photos/600/800?random=15',
+  'https://picsum.photos/600/800?random=16',
+]
+
+const links = [{
+  label: 'Home',
+  icon: 'i-heroicons-home',
+  to: '/',
+}, {
+  label: 'Navigation',
+  icon: 'i-heroicons-square-3-stack-3d',
+}, {
+  label: 'Breadcrumb',
+  icon: 'i-heroicons-link',
+}]
+</script>
+
+<template>
+  <div>
+    <UCarousel
+      v-slot="{ item }"
+      :items="items"
+    >
+      <img
+        :src="item"
+        width="300"
+        height="400"
+        draggable="false"
+      >
+    </UCarousel>
+
+    <UBreadcrumb :links="links" />
+
+    <UChip>
+      <UButton
+        icon="i-heroicons-inbox"
+        color="gray"
+      />
+    </UChip>
+  </div>
+</template>