init

components/MainCarusel.vue

@@ -3,34 +3,30 @@
     <UCarousel
       v-slot="{ item }"
       arrows
-      :items="items"
+      :items="previewItems"
       :ui="{ item: 'basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/5 xl:basis-1/6' }"
       class="w-full variant"
     >
-      <img
-        :src="item.img"
-        alt="item.img"
-        class="rounded-lg w-full h-auto object-cover"
-      >
+      <NuxtLink :to="`/post/${item.id}`">
+        <img
+          :src="item?.previewImage?.src"
+          :alt="item?.previewImage?.src"
+          class="rounded-lg w-full h-auto object-cover"
+        >
+      </NuxtLink>
     </UCarousel>
   </div>
 </template>
 
 <script setup lang="ts">
-const items = [
-  {
-    id: 1,
-    img: 'https://picsum.photos/468/468?random=1',
-  },
-  {
-    id: 2,
-    img: 'https://picsum.photos/468/468?random=2',
-  },
-  {
-    id: 3,
-    img: 'https://picsum.photos/468/468?random=3',
-  },
-]
+interface PreviewItem {
+  id: number
+  previewImage: {
+    src: string
+  }
+}
+
+defineProps<{ previewItems: PreviewItem[] }>()
 </script>
 
 <style lang="scss">