product-card

composables/useProductsList.ts

@@ -8,7 +8,7 @@ export const useProductsList = () => {
     name: product?.name,
     price: product?.price,
     variations: product?.variations,
-    images: product?.images?.splice(0, 5),
+    images: product?.images?.slice(0, 5),
   })) ?? [])
 
   return {

pages/index.vue

@@ -3,17 +3,13 @@
     <div
       class="cards-list"
     >
-      <pre>
-      {{ productCardData }}
-      </pre>
-
       <div
         v-for="product in productCardData"
         :key="product.id"
         class="card"
         @click="router.push(`/product/${product.id}`)"
       >
-        <img :src="product?.images[0]?.src" alt="product?.image">
+        <img class="card__image" :src="product?.images[0]?.src" alt="card?.image">
 
         <div class="card__description">
           <div>{{ product?.name }}</div>
@@ -41,19 +37,23 @@ const router = useRouter()
 
 <style lang="scss">
 .cards-list {
-  padding: 40px;
+  padding: 15px;
 
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 4px;
 }
 
 .card {
-  width: 400px;
+  min-width: 300px;
   display: flex;
   flex-direction: column;
   cursor: pointer;
 
+  &__image {
+    width: 100%;
+  }
+
   &__description {
     padding-inline: 10px;
   }