wip migration

components/ItemsRow.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="row">
+    <ClientOnly placerholder="Loading...">
+      <!-- <div class="arrow-left-wrapper col-2 col-sm-1">
+        <img
+          class="arrow"
+          src="@/assets/img/categories-row-arrow-left.svg"
+          alt=""
+          @click="slideCarousel('prev')"
+        />
+      </div> -->
+
+      <Carousel
+        ref="productDetails"
+        class="col-8 col-sm-10"
+        :items-to-show="3"
+        :gap="5"
+        :pagination-enabled="false"
+        :wrap-around="false"
+        :mouse-wheel="true"
+        :breakpoints-enabled="true"
+      >
+        <Slide v-for="item in items" :key="item.id">
+          <NuxtLink :to="formattedItem(item).url" class="slide">
+            <div class="image-container">
+              <img class="image" :src="formattedItem(item).image" alt="" />
+            </div>
+            <span>{{ formattedItem(item).name }}</span>
+          </NuxtLink>
+        </Slide>
+        <template #addons>
+          <Navigation />
+        </template>
+      </Carousel>
+
+      <!-- <div class="arrow-right-wrapper col-2 col-sm-1">
+        <img
+          class="arrow"
+          src="@/assets/img/categories-row-arrow-right.svg"
+          alt=""
+          @click="slideCarousel('next')"
+        />
+      </div> -->
+    </ClientOnly>
+  </div>
+</template>
+
+<script>
+import { Carousel, Slide, Navigation } from 'vue3-carousel'
+import 'vue3-carousel/dist/carousel.css'
+import defaultImage from '@/assets/img/latienda-product-default.png'
+
+export default {
+  components: {
+    Carousel,
+    Slide,
+    Navigation
+  },
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      defaultImage,
+      config: {
+        height: 200,
+        breakpointMode: 'carousel', // o 'viewport'
+        breakpoints: {
+          300: {
+            itemsToShow: 2,
+            snapAlign: 'center',
+          },
+          400: {
+            itemsToShow: 3,
+            snapAlign: 'start',
+          },
+          500: {
+            itemsToShow: 4,
+            snapAlign: 'start',
+          },
+        },
+      }
+    }
+  },
+  methods: {
+    formattedItem(item) {
+      if (this.type === 'product') {
+        return {
+          name: item.name,
+          image:
+            item.image || this.defaultImage,
+          url: `/productos/${item.id}`,
+        }
+      }
+      if (this.type === 'company') {
+        return {
+          name: item.company_name,
+          image:
+            item.logo || this.defaultImage,
+          url: `/c/${item.id}`,
+        }
+      }
+      if (this.type === 'category') {
+        return {
+          name: item.name,
+          image:
+            item.image || this.defaultImage,
+          url: `/busqueda?category=${item.name}`,
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.slide {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: stretch;
+  padding: 0.3rem;
+  span {
+    text-align: center;
+    display: -webkit-box;
+    --webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    width: 25vw;
+    max-width: 110px;
+    font-weight: $regular;
+    font-size: $s;
+  }
+}
+
+.image-container {
+  width: 100%;
+  height: 5rem;
+  margin-bottom: 0.7rem;
+  @include mobile {
+    max-height: 10rem;
+    max-width: 10rem;
+  }
+  .image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+</style>